css小常识

css 小常识

一.vertical-align可以采用负值(正/负值根据基线上下移动),也可以采用百分比值,而这个百分比值不是相对于字体大小或者其他什么属性计算的,而是相对于line-height计算的. 此外,width,height,font-size的百分比是相当于父元素的相同属性的值来计算的: line-height的百分比值是根据父元素的font-size来计算的: 二.浏览器标题栏小图标: <link rel="shortcut icon" href="图片位置"…

static:对象遵循常规流.此时4个定位偏移属性不会被应用(即没有声明position:relative, top.right.bottom.left不管用). 当position的值为非static时,其层叠级别通过z-index属性定义. margin值不超出父级,需要在父级声明 position:relative overflow:hidden(父级包含子级的margin值): 不同层叠上下文中,元素的显示顺序依据祖先的层叠级别来决定,与自身的层叠级别无关. 实现多行文本溢出显示省略号…

总结的一些网站利于搜索引擎优化的小常识及SEO优化

网站利于搜索引擎优化的小常识 1. 尽量用独立IP和空间原因:同IP下其他网站受罚,可能会对你站有影响.如果你的站和很多垃圾.色情站同在一个服务器,搜索引擎会喜欢吗? 2. 做不同内容网站时,避免使用二级域名和免费域名.原因:当主域名或其他二级域名被惩罚,会牵连你的站.而且搜索引擎会规定每个域名下的收录数 3. 以复合关键字作域名,都应该用短横线隔开.如:www.made-in-china.com原因:如果用www.madeinchina.com 搜索引擎会把madeinchina认为是一个词,…

css小技巧（1）

1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selection 选中文字时文字颜色和选中色 <!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-s…

HTML+CSS小实战案例

HTML+CSS小实战案例登录界面的美化,综合最近所学进行练习网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>实验</title> <style type="text/css"> *{…

IC 小常识

IC产品的命名规则: 大部分IC产品型号的开头字母,也就是通常所说的前缀都是为生产厂家的前两个或前三个字母,比如:MAXIM公司的以MAX为前缀,AD公司的以AD为前缀,ATMEL公司的以AT为前缀,CY公司的以CY为前缀,像AMD,IDT,LT,DS,HY这些公司的IC产品型号都是以生产厂家的前两个或前三个为前缀.但也有很生产厂家不是这样的,如TI的一般以SN,TMS,TPS,TL,TLC,TLV等字母为前缀:ALTERA(阿尔特拉).XILINX(赛灵斯或称赛灵克斯).Lattice(莱迪斯…

CSS小tip整理

CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB"; padding-left: 0.5em; } /* 右箭头*/ ol a[rel="next"]:after { content: "00BB"; padding-right: 0.5em; } 2.让父元素包含浮动的子元素: 添加一个进行清理的元素让父元素浮…

h5 做app时和原生交互的小常识。

距离上次随笔或许有半年了吧,最近在用hybrid模式开发移动app,所以就简单的说说用h5技术开发app时候,做原生交互的几个小常识: 一.拨打电话或者发送短信: <a href="tel:10086">点击a标签就会拨打电话</a> <a href="sms:10086">点击a标签就会发送短信</a> <a href="tel:">点击a标签就会跳到拨打电话页</a> 二…

css小细节罗列

有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样的代码来设置绝对的行高.但是当我们的需求改变,字体大小变动的时候,可能我们还需要再次改动行高,那么现在我们可以使用直接设置数字来设置行高,当我们使用纯数字来设置行高的时候,它相对于的是字体大小的倍数,也就是说下面的h4其实设置的行高也是12*2px就是24px.这样设置的好处是当我们在改变字体大小的…

css小随笔（二）与通用样式

51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟css的标签,所以在没有接触通用样式之前很可能就是这两个板块就是两个不同的代码了,然后就会导致css文件里面的代码会非常的多,也会是比较混乱的,不能够清楚明了的看懂.而且应用的通用样式就是可以用一套代码来搞定各个类似板块,并且每个板块不同的地方仅仅需要微调就可以了.这样不仅仅使代码明了,而且还会很省事,…

iconfont字体图标和各种CSS小图标

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中: 这些小图形我们可以用图片代替,通常我们是把这些图形切图之后做成精灵图(又叫雪碧图): 精灵图的原理:把很多小图片集合成一张大图片,然后用设置背景图的位置来显示图片: 精灵图的优点:减少服务器的请求次数,降低服务器压力: sprites是一款很好的精灵图制作工具: 当然还有其他的方法可以制作这些…

CSS 小技巧

CSS 小技巧一.边框内圆角我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width: 200px; height: 80px; padding: 10px; background: rgb(255, 187, 51); #content { display: flex; justify-content: center; align-items: center; height: 1…

html+css小总结

html+css小总结 1.块级元素 <div> <h1> <hr /> <p> <pre> <ol> <ul> <li> <dl> <dt> <dd> <table> <tr> <td> <colgroup> <col> <form>等会换行,想在同一行显示需浮动或者display: inline 2…

【前端词典】几个有益的 CSS 小知识

今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能后代选择器样式选择器中间的空格是什么?它的名字是 —— 后代选择器. 为什么会更消耗性能呢? 因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签.这样一来如果代码中有很多p标签,无疑是会做很多重复工作的. 所以可以减少使用…

几个有益的 CSS 小知识

样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能后代选择器样式选择器中间的空格是什么?它的名字是 —— 后代选择器. 为什么会更消耗性能呢? 因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签.这样一来如果代码中有很多p标签,无疑是会做很多重复工作的. 所以可以减少使用 HTML 标签来定义 CSS 的方式,换成使用具体的class.…

css 小图标 & iconfont 字体图标

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中: 这些小图形我们可以用图片代替,通常我们是把这些图形切图之后做成精灵图(又叫雪碧图): 精灵图的原理:把很多小图片集合成一张大图片,然后用设置背景图的位置来显示图片: 精灵图的优点:减少服务器的请求次数,降低服务器压力: sprites 是一款很好的精灵图制作工具: 当然还有其他的方法可以制作…

常用的CSS小技巧

实际开发过程中会遇到一些需要用CSS小技巧处理的布局问题,现在分享几个个人工作中遇到的小问题和解决方案. 1.inline元素间的空白间隙这里要介绍一个神器font-size:0. 如果你写了个列表,因为元素节点有文本节点,在缩进代码时会占据宽度,比如: <ul> <li>我是第一项</li> <li>我是第二项</li> <li>我是第三项</li> <li>我是第四项</li> </ul…

css+div 布局遇到的小常识

/根目录../上层目录举例如下: 在photo.css文件中写入: div.ls{ background:url(../photo/framels.jpg) no-repeat left; }div.pt{ background:url(../photo/framept.jpg) no-repeat left; }…

上学时的HTML+JS+CSS(小总结)

html:超文本标记语言基本标签: { 文本标签:<pre></pre>:原封不动的保留空白区域. <br />:换行. <hr width="宽度(单位:%)" size="高度" noshade(该行不带阴影) color="线条颜色" />:在文档中画一条水平线,可用来分割文档. <strong></strong>:加…

Web前端开发基础第四课（CSS小技巧1）

垂直居中-父元素高度确定的单行文本父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的.如下代码: <div class="container"> hi,imooc! </div> css代码: <style> .container{ height:100px; line-height:100px; background:#999; } </style> <!DOC…

前端开发者应该知道的 CSS 小技巧

一些小技巧让你的CSS技术更专业使用:not()去除导航上不需要的边框为body添加行高垂直居中任何元素逗号分离的列表使用负nth-child选择元素使用SVG图标文本显示优化在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽使用Flexbox摆脱边界Hack 使用属性选择器选择空链接使用:not()添加/去除导航上不需要的边框添加边框… /* 添加边框 */ .nav li { border-right: 1px solid #666;…

HTML & CSS 小总结

1. web 主机代理商 web hosting company, 让他们的服务器为你的页面服务2. 选择网站名字例如: www.1234.com3. 寻找把文件从电脑传到主机的途径4. 把新网站告诉朋友域名:用来定位你的网站的独一无二的名字 1234.com 网站名:www.1234.com http://www.1234.com/index.html ( 其中后面的 / 就是服务器根目录, index.html是页面文件 )http://, 输入的地址是URL, 统一资源定位符, ht…

一些常被你忽略的CSS小知识

1.CSS的color属性并非只能用于文本显示对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方.它可以把页面上的所有的东西都变颜色.比如: 无法显示的图片的alt文字. list元素的边框.无序list元素前面的小点.有序list元素前面的数字和hr元素等 1: <html> 2: <head> 3: <meta http-equiv="cont…

12个你未必知道的CSS小知识

虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方. 请注意,上面的代码里只使用了一个color属性,就是在body元素上,设置成了yellow.但是,你也看到了,所有这个页面上的东西都变成了黄色…

Css 小技巧总结

相对偏移指定left top等属性就能够够完美控制一个元素的位置如: position:relative; left:2px; 今天遇到一个很好玩的问题,当两个并排浮动框,当一个框的长度太大时就会把另一个框顶到下一行,这个时候就可以用margin-right:-2px;将右外距设置为负数来解决! css写表达式控制图片大小,当图片大小大于某一数值时,强制设置其宽高为指定大小. img { max-width: 163px; width:expression(this.width > 163…

css小随笔

一.什么是CSS W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说是CSS.CSS全称Cascading Style Sheets,中文名为层叠样式表,是一种用来表现HTML等文件样式的计算机语言. 二.引入CSS三种样式 1.行内样式表:在HTML标签中,使用style=""的形式引用缺点:不符合W3C关于内容与表现分离的要求.代码杂乱,不利于后期维护. 2.内部样式表:在head标…

CSS小随笔（三）浮动与定位

先来说一下CSS中的浮动一.浮动 1.标准流中的块级盒子,宽度将自动伸展为100%,而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开 2.当一个盒子浮动,标准流中未浮动的其他盒子,将视浮动盒子不存在而占据浮动盒子原来的位置.(浮动盒子,会盖在这个盒子的上方) 但是,未浮动盒子中的文字内容,将会受到浮动盒子宽度的影响.(未浮动盒子中的内容,不会被浮动盒子盖住) 3.由于第二条的原因. 可以给收影响的盒子,添加clear属性,清除掉浮动盒子对自身的影响 clear可选值:left-清除左浮动影响…

CSS小技巧使用

1.清除浮动浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很多方式来避免这种麻烦,其中我觉得最方便也是兼容性最好的一种是....// 清除浮动 .clearfix{ zoom: 1; } .clearfix:after{ display: block; content: ''; clear: both; } 2.垂直水平居中在css的世界里水平居中比垂直居中来的简单一些,经过了多年的演化,依然没有好的方式来让元素垂直居中(各种方式各有优缺点,但都不能达到兼容性好,破坏力小的目标),以下…

HTML、CSS(小笔记)

这是我自己在学习html.css时觉得要记的东西太多总结一些较为常用的标签. HTML <p></p>段落标签 <hn></hn>标题标签n数值为1~6之间,n值越大标题文字越小. <br />换行 <img />图像标签属性:src:图片的路径 width:宽度 height:高度 alt:图片加载失败时,显示该文字 title:鼠标悬浮显示文字 <audio></audio>音频标签属性:autop…

python第二十八课——编码小常识

2.内存和硬盘: 内存:计算机硬件组成部分之一,它是一个容器,用来存储数据:处理数据速度快, 存储数据量小:断电死机数据会丢失,短暂性存储数据硬盘:计算机硬件组成部分之一,它是一个容器,用来存储数据:处理数据速度慢, 存储数据量大,断电死机数据不会丢失,数据的持久存储 3.字节和字符字节:计算机的存储数据的单位,底层唯一能够识别并且运算的数据字符:人类将字节封装为另一种能直接识别的数据单位,底层还是字节 4.如何区分字节文件和字符文件如果使用文本编辑器打开能看得懂(不会乱码)那它就是一个…

【css小常识】的更多相关文章