前言：前段时间写了几篇自己工作中总结的技术文章，感觉在分享自己技术经验的同时，也同时完善了自己的不足。这感觉挺好的。怪不得当老师的都有种深深的满足感。今天这篇文章主要是分享下自己对目前的css3技术上的学习心得。有不对的地方欢迎指出。大家共同提高！闲话不多说，begin！

js Bin：http://jsbin.com/?html,output

目录：

1. css优先级 
2. 元素选择符
3. 关系选择符
4. 属性选择符
5. CSS Pseudo-Classes Selectors（伪类选择符）
6. Pseudo-Element Selectors 伪对象选择符
7. 语法及规则
8. 取值与单位
9. 颜色取色
10. 计算函数
11. 渐变
12. 技巧与经验
13. 附录

-----------------------------------------------------------------------------------------------

1、css优先级

     可能工作中你会用到很多CSS框架。比如bootstrap layui element muse-ui iview jqueryui 等吧。那么当你开发页面的 时候，总有对当前ui不满足的地方。这时候你就可能要改人家封装好的css文件喽。当时有时候你可能添加了你自己的css。但是页面渲染出来后。为毛无效或则部分有效？这就要考虑css优先级的问题了。人家优先级高，当然会覆盖你的css效果喽。so  首先咱们还是要学好css优先级。

内联（style=""） > 内联样式表（）> 外联样式表（
    ） > 浏览器缺省复制代码

 但是如果你在css 后加 ！important   那么这个css 会覆盖其他的css 。也可以说当前css优先级最高！

来一张网上的权重图：

    
    
    
     
     Text  
    
      复制代码

效果如下：

//

//

解释：如果定义了三个class，最后生效的是样式表中最后定义的（也就是说浏览器最后渲染的），而不是class中最后定义的。

//

解释：以标签选择器 、标签选择器这种后代选择器的形式来定义样式，最终显示的样式是最后定义的样式。

//

解释：伪类选择器覆盖了上面的渲染效果

总结

• 样式表的元素选择器选择越精确，则其中的样式优先级越高。则越是最后渲染效果。
• 对于相同权重的选择器的样式，越靠后的优先级越高。
• 使用!important会覆盖前面所有的css声明。

//

2、元素选择符

通配选择符 (*)

 说明：

• 通配选择符
• 通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用

1. IE6及更早浏览器并不支持通配选择符(*)，而是将它忽略了，所以也变相的能看到效果。

    
    
标题
正文内容
      复制代码

类型选择符(E)

    
    
标题
正文内容
      复制代码

ID选择符(E#id)

    
    
标题
正文内容
      复制代码

类选择符(E.class)

定义多个类：.a {	color: #f00;}.b {	font-weight: 700;}
      
       给某个div元素定义.a和.b两个类
      
注意，id选择符不能在同个元素上定义多个，比如id="a b"就是错误的写法复制代码

类选择符高级用法：多类选择符.a.b {	color: #f00;}
    
     多类选择符使用方法
    
此例命中同时拥有.a和.b两个类的元素。需要注意的是IE6并不支持多类选择符，如：.a.b{}将会被视为：.b{}复制代码

    
    
标题
正文内容
多类选择符的使用
      复制代码

3、关系选择符

包含选择符(E F)

说明：选择所有被E元素包含的F元素。与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...
    
	
     
      0		
      
       1
      
		
      
       2
      
		
      
       3
      
	
     
    
此例，如果使用.demo div，那么 0, 1, 2, 3 都有有边框；如果使用 .demo > div，那么只有 0 有边框，即只有子元素会被命中；总结：.demo div 匹配到子 孙 所有后台      .demo > div 只能匹配到子复制代码

子选择符(E>F)

说明：选择所有作为E元素的子元素F。是子元素 不包含孙元素与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。示例：.demo > div {	position: relative;}
      
	
       
		
        
         子选择符
        
	
       
      
此例只有 .a 会被命中，因为它是 .demo 的子元素；复制代码

相邻选择符(E+F)

说明：选择紧贴在E元素之后F元素。不包含E 元素  在文档流中从上（html）到下开始找 与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。VS. E+F：
p1
p2
这是一个标题
p3
这是一个标题
p4
p5
此例，如果使用p + p{color:#f00;}，那么p2, p5将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色；复制代码

兄弟选择符(E~F)

同上复制代码

4、属性选择符

E[att]

说明：选择具有att属性的E元素。例如：此例，将会命中第一、 三张图片，因为匹配到了alt属性复制代码

    
    
    
  
     
外部链接
  
     
内部链接
  
     
外部链接
  
     
内部链接
    
      复制代码

E[att="val"]

说明：选择具有att属性且属性值等于val的E元素。例如：此例，将会命中第一张input，因为匹配到了alt属性，并且属性值为text复制代码

E[att~="val"]

说明：选择具有att属性且其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。例如：
    
     1
    
    
     2
    
    
     3
    
此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值中有一个值为a复制代码

    
    
    
  
     
外部链接
  
     
内部链接
  
     
外部链接
  
     
外部链接
  
     
内部链接
    
      复制代码

E[att^="val"]

说明：选择具有att属性且属性值为以val开头的字符串的E元素。例如：
    
     1
    
    
     2
    
    
     3
    
此例，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头复制代码

E[att$="val"]

说明：选择具有att属性且属性值为以val结尾的字符串的E元素。例如：
    
     1
    
    
     2
    
    
     3
    
此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾复制代码

E[att*="val"]

说明：选择具有att属性且属性值为包含val的字符串的E元素。例如：
    
     1
    
    
     2
    
    
     3
    
此例，将会命中所有div，因为匹配到了class属性，且属性值中都包含了b复制代码

E[att|="val"]

说明：选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。例如：
    
     1
    
    
     2
    
    
     3
    
此例，将会命中第一个div，因为匹配到了class属性，且属性值以紧跟着"-"的a开头复制代码

5、CSS Pseudo-Classes Selectors（伪类选择符）

超链接 a     :link  :visited : hove : active  即用喜欢(love)和讨厌(hate)两个词来概括   顺序不能变

a:link {} 设置超链接a在未被访问前的样式。a:visited {} 设置超链接a在其链接地址已被访问过时的样式。a:hover {}   设置元素在其鼠标悬停时的样式。a:active {} 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。复制代码

//

E:focus

说明：

     
     
请聚焦到以下输入框
     
  
      
    
       
    
       
    
       
    
       
  
      
     
      复制代码

E:lang(fr)

说明：匹配使用特殊语言的E元素。
    
    
大段测试文字
english
      复制代码

E:not(s)        css3

说明：匹配不含有s选择符的元素E。有了这个选择符，那么你将可以很好的处理类似这样的场景：假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线示例：.demo li:not(:last-child) {	border-bottom: 1px solid #ddd;}上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线复制代码

E:root   css3

说明：匹配E元素在文档的根元素。在HTML中，根元素永远是HTML根据这个特性，可以做IE8的Hack示例：.test {	color: black;	color: yellow\0;	*color: blue;	_color: red;}html:root .test {	color: purple\0;}
    
  
     
列表项一
  
     
列表项二
  
     
列表项三
    
上述代码：非IE文本将为black，IE9及以上为purple，IE8为yellow，IE7为blue，IE6为red复制代码

//重点来了

E:first-child

说明：匹配父元素的第一个子元素E。要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素这里可能存在误解：示例代码：
    
	
     
列表项一
	
     
列表项二
	
     
列表项三
	
     
列表项四
    
在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:first-child{sRules}，而不是ul:first-child{sRules}。复制代码

来看这样一段代码：示例代码：p:first-child{color:#f00;}
    
	
     
我是一个p
    
这段代码你能看到p元素被命中变成了红色假设将代码简单地修改一下：示例代码：p:first-child{color:#f00;}
    
	
     
我是一个标题
	
     
我是一个p
    
只是在p前面加了一个h2标签，你会发现选择器失效了，没有命中p，why?复制代码

解释：E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有，只不过情况正好相反，需要它是最后一个子元素。

几乎同上复制代码

E:only-child    css3

说明：匹配父元素仅有的一个子元素E。要使该属性生效，E元素必须是某个元素的唯一一个子元素，E的父元素最高是body，即E可以是body的子元素复制代码

    
    
只有唯一一个子元素
    
  
     
结构性伪类选择符 E:only-child
    
有多个子元素
    
  
     
结构性伪类选择符 E:only-child
  
     
结构性伪类选择符 E:only-child
  
     
结构性伪类选择符 E:only-child
    
      复制代码

效果如下：

E:nth-child(n)            css3

说明：匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成：E:nth-child(2n)使用E:nth-child(n)实现奇偶：示例代码：
      
	
       
列表项一
	
       
列表项二
	
       
列表项三
	
       
列表项四
      
因为(n)代表一个乘法因子，可以是0, 1, 2, 3, ..., 所以(2n)换算出来会是偶数，而(2n+1)换算出来会是奇数复制代码

该选择符允许使用一些关键字，比如：odd, even使用odd, even实现奇偶：
    
	
     
列表项一
	
     
列表项二
	
     
列表项三
	
     
列表项四
    
关键字odd代表奇数，even代表偶数复制代码

注意：

    
	
     
第1个p
	
     
第2个p
	
     第1个span	
     
第3个p
	
     第2个span	
     
第4个p
	
     
第5个p
    
p:nth-child(3){color:#f00;}这是会命中第3个p么？如果你这么认为那就错了，这条选择符就不会命中任何一个元素。p:nth-child(4){color:#f00;}这时你以为会命中第4个p，但其实命中的却是第3个p，因为它是第4个子元素复制代码

解释：E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。n 从1 开始 而不是从0。

假设不确定第1个子元素是否为E，但是又想命中第1个E，应该这样写：p:first-of-type{color:#f00;}或者这样写：p:nth-of-type(1){color:#f00;}复制代码

E:nth-last-child(n)  css3

有一点需要注意的是：HTML示例代码：
     
	
      
第1个p
	
      
第2个p
	
      第1个span	
      
第3个p
	
      第2个span
     
如上HTML，假设要命中倒数第一个p(即正数第3个p)，那么CSS选择符应该是：p:nth-last-child(2){color:#f00;}而不是：p:nth-last-child(1){color:#f00;}因为倒数第1个p，其实是倒数第2个子元素。基于选择符从右到左解析，首先要找到第1个子元素，然后再去检查该子元素是否为p，如果不是p，则n递增，继续查找假设不确定倒数第1个子元素是否为E，但是又想命中倒数第1个E，应该这样写：p:last-of-type{color:#f00;}或者这样写：p:nth-last-of-type(1){color:#f00;}复制代码

E:first-of-type  css3

说明：

• 该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E

    
    
    
  
     
      我是一个div元素
     
  
     
我是一个p元素
  
     
我是一个p元素
    
      复制代码

E:last-of-type            css3

说明：匹配同类型中的最后一个同级兄弟元素E。该选择符总是能命中父元素的倒数第1个为E的子元素，不论倒数第1个子元素是否为E复制代码

    
    
    
  
     
      我是一个div元素
     
  
     
我是一个p元素
  
     
我是一个p元素
    
      复制代码

E:only-of-type         css3

说明：

    
    
    
  
     
结构性伪类选择符 E:only-of-type
    
      复制代码

E:nth-of-type(n)          css3

有一点需要注意的是：HTML示例代码：
    
	
     
第1个p
	
     
第2个p
	
     第1个span	
     
第3个p
	
     第2个span
    
如上HTML，假设要命中第一个span：span:nth-of-type(1){color:#f00;}如果使用E:nth-child(n)：span:nth-child(3){color:#f00;}复制代码

E:nth-last-of-type(n)           css3

说明：匹配同类型中的倒数第n个同级兄弟元素E。复制代码

    
    
    
  
     
我是一个p元素
  
     
      我是一个div元素
     
  
     
我是一个p元素
  
     
我是一个p元素
  
     我是一个span元素
    
            复制代码

E:checked       css3

说明：匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)复制代码

    
    
    
     
  
      
选中下面的项试试
  
      
    
       
蓝色
    
       
红色
    
       
黑色
  
      
     
     
  
      
选中下面的项试试
  
      
    
       
蓝色
    
       
红色
    
       
黑色
  
      
     
    
      复制代码

E:enabled         css3

说明：匹配用户界面上处于可用状态的元素E。复制代码

    
    
    
     
  
      
E:enabled与E:disabled
  
      
    
       
    
       
    
       
    
       
  
      
     
    
      复制代码

E:disabled             css3

同上复制代码

//重点结束

E:empty           css3

说明：匹配没有任何子元素（包括text节点）的元素E。复制代码

    
    
    
  
     
结构性伪类选择符 E:empty
  
     
      
  
     
结构性伪类选择符 E:empty
    
      复制代码

E:target             css3

说明：匹配相关URL指向的E元素。解释：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。示例代码：#demo:target{color:#f00;}
    
	
     
E:target伪类使用方法
    
假设上述代码在页面 a.html 中，那么当访问 a.html#demo 时，这个div元素将会被:target命中复制代码

    
    
    
  
     
    
      前往区块1    
      前往区块2    
      前往区块3    
      前往区块4    
      前往区块5  
     
  
     
    
      
      
       
区块1
      
       
        
区块1内容
        
区块1内容
        
区块1内容
       
    
      
    
      
      
       
区块2
      
       
        
区块2内容
        
区块2内容
        
区块2内容
       
    
      
    
      
      
       
区块3
      
       
        
区块3内容
        
区块3内容
        
区块3内容
       
    
      
    
      
      
       
区块4
      
       
        
区块4内容
        
区块4内容
        
区块4内容
       
    
      
    
      
      
       
区块5
      
       
        
区块5内容
        
区块5内容
        
区块5内容
       
    
      
  
     
    
      复制代码

6、Pseudo-Element Selectors 伪对象选择符

E:first-letter            css3

说明：设置对象内的第一个字符的样式。此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。该伪类常被用来配合font-size属性和float属性制作首字下沉效果。IE6在使用该选择符时有个显式的BUG：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。同时还存在该BUG的选择符包括：E:first-lineCSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。即E:first-letter可转化为E::first-letter复制代码

    
    
杂志常用的首字下沉效果
今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。
   复制代码

效果如下：

E:first-line               css3

说明：设置对象内的第一行的样式。此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。IE6在使用该选择符时有个显式的BUG：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。同时还存在该BUG的选择符包括：E:first-letterCSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。即E:first-line可转化为E::first-lineE:first-line选择符不能紧挨着规则集大括号，需留有空格或换行。本质上并不支持伪元素的双冒号(::)写法，而是忽略掉了其中的一个冒号，仍以单冒号来解析，所以等同变相支持了E::first-line。复制代码

    
    
第一行文字的颜色与其它不同
今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。
      复制代码

E:before              css3

说明：设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。即E:before可转化为E::before复制代码

本质上并不支持伪元素的双冒号(::)写法，而是忽略掉了其中的一个冒号，仍以单冒号来解析，所以等同变相支持了E::before。不支持设置属性position, float, list-style-*和一些display值，Firefox3.5开始取消这些限制。IE10在使用伪元素动画有一个问题：例如：.test:hover {}.test:hover::before { /* 这时animation和transition才生效 */ }需要使用一个空的:hover来激活复制代码

    
    
Sorry, 你的浏览器不支持E:after和E::after
            复制代码

效果：

注意： p::before 添加的文字覆盖了原先的  

E:after           css3

同上复制代码

7、语法及规则

说明：（前端框架支持最少都是ie9。。。 ie6以下的更不用考虑喽 这个可以不用了解！）提升指定样式规则的应用优先权。IE6及以下浏览器有个比较显式的支持问题存在，!important在同一条规则集里不生效。请看下述代码：示例代码：div {	color: #f00 !important;	color: #000;}在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00IE6及以下浏览器要使!important生效，可用以下代码：示例代码：div {
    	color: #f00 !important;}div {	color: #000;}在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00复制代码

@import    css3

说明：指定导入的外部样式表及目标媒体。该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。IE使用@import无法引入超过35条的样式表。使用url(url)和直接使用url需要注意的地方：示例代码：@import url("global.css");@import url(global.css);@import "global.css";以上3种方式都有效。当使用url(url)的方式时，包住路径的引号可有可无；当直接使用url时，包住路径的引号必须保留。指定媒体查询：示例代码：@import url(example.css) screen and (min-width:800px);@import url(example.css) screen and (width:800px),(color);@import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);复制代码

    
    
    
     fdd
    
      如果css  .test{color:green;} 放在@import 前面 则@import 不生效！复制代码

@charset

说明：在外部样式表文件内使用。指定该样式表使用的字符编码。该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。在外部css文件中写法如下：示例代码：@charset "utf-8";body { sRules }div { sRules }...复制代码

@media

说明：指定样式表规则用于指定的媒体类型和查询条件。IE8及以下只能实现CSS2中的部分，即只可以设置媒体类型。媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。示例代码：@media screen and (width:800px){ … }@import url(example.css) screen and (width:800px);
    
    复制代码

列举几种使用方式：@media all and (width:1024px){	body{color:#f00;}}@media all and (device-height:800px){ … }@media all and (orientation:landscape){ … }@media all and (device-aspect-ratio:16/10){ … }@media all and (min-color:1){ … }@media all and (monochrome:0){ … }@media all and (grid:0){ … }复制代码

    
    
    
     Media Queries媒体查询
    
    
     如果你的显示器水平分辨率为1024px的话将能看到本条规则的效果（取决于输出设备屏幕分辨率的大小，不随包括浏览器在内的窗体大小而改变）
    
    
     如果视口宽度为1024px的话将能看到本条规则的效果（随包括浏览器在内的窗体大小而改变）
    
      复制代码

@font-face

示例：使用一个全浏览器兼容的自定义字体代码如下：@font-face {	font-family: 'diyfont';	src: url('diyfont.eot'); /* IE9+ */	src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */		 url('diyfont.woff') format('woff'), /* chrome、firefox */		 url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/		 url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */}你需要同时提供4种格式的字体复制代码

    
    㐳㐴㐵㐶㐷㐸㐹㐺㐻㐼㐽㐾㐿㑀㑁㑂㑃㑄㑅㑆㑇㑈㑉㑊㑋㑌㑍㑎㑏㑐㑑㑒㑓㑔㑕㑖㑗㑘㑙㑚㑛㑜㐲㐷㐸㐹㐺㐻㐼㐽㐾㐿㑀㑁㑂㑋㑌㑍㑎㑏㑐㑑㑒㑓㑔㑕㑖㑗㑘㑙㑚㑛㑜㑝㑞㑟㑠㑡㑢㑣㑤㑥㑦㑧㓾㓿㔀㔁㔂㔃      复制代码

@keyframes

示例代码：@keyframes testanimations {	from { opacity: 1; }	to { opacity: 0; }}其中testanimations是该动画的名字，该动画表示某个东西将逐渐消失。如果复杂的动画，可以混合
    
     去设置某个时间段内的任意时间点的样式：示例代码：@keyframes testanimations {	from { transform: translate(0, 0); }	20% { transform: translate(20px, 20px); }	40% { transform: translate(40px, 0); }	60% { transform: translate(60px, 20); }	80% { transform: translate(80px, 0); }	to { transform: translate(100px, 20px); }}当然，也可以不使用关键字from和to，而都使用
     
      ：示例代码：@keyframes testanimations{	0% { transform: translate(0, 0); }	20% { transform: translate(20px, 20px); }	40% { transform: translate(40px, 0); }	60% { transform: translate(60px, 20px); }	80% { transform: translate(80px, 0); }	100% { transform: translate(100px, 20px); }}注意，这里的0%不能简写成0，0是非标准语法（虽然被某些浏览器所支持）。复制代码
     
    

    
    
    
  
     弹球  
     滑杆
    
      复制代码

@supports

说明：检测是否支持某CSS特性定义支持和不支持flex标准写法的浏览器分别使用不同的规则：示例代码：@supports ( display: flex ) {	body {		display: flex;	}	#aside {
    		width: 210px;	}	#main {
    		flex: auto;	}}@supports not ( display: flex ) {	#aside {
    		float: left;		width: 210px;	}	#main {
    		overflow: hidden;		*zoom: 1;	}}我们可以通过类似这样的写法来给不同的终端使用差异化的方案。你也可以写多重规则来进行过滤：示例代码：@supports ( box-shadow: 2px 2px ) or          ( -moz-box-shadow: 2px 2px ) or          ( -webkit-box-shadow: 2px 2px ) {	.demo {		-moz-box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);		-webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);		box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);	}}复制代码

    
    
    
     aside
    
    
     main
    
      复制代码

8、取值与单位

长度单位包括包括：相对单位和绝对单位。相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin绝对长度单位包括有： cm, mm, q, in, pt, pc, px复制代码

px 

说明：

em 

说明：

    
    
假定当前默认字体尺寸是14px，n em即为14px字体尺寸的n倍：
    
  
     
    1em:    
1em大小的文字
  
  
     
    2em:    
2em大小的文字
  
  
     
    3em:    
3em大小的文字
  
    
            复制代码

rem    ie9+

说明：

    
    
下面的文字将是html定义的字体大小的2倍：
我是html定义的12px的2倍，字体大小为24px
      复制代码

vw       viewPort  width       ie9+

说明：

    
    
相对于viewport宽度大小的文字
      复制代码

vh    ie9+

说明：

vmax   

说明：

    
    
相对于viewport的宽度或高度中较大的那个然后计算文字大小。
      复制代码

vmin

说明：相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin示例代码：h1 {	font-size: 8vm;	font-size: 8vmin;}如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100，因为高度比宽度要小，所以计算的时候相对于高度。复制代码

    
    
相对于viewport的宽度或高度中较小的那个然后计算文字大小。
      复制代码

其他的布局中 如flex  grid 有自己的单位  其他文章中有描述！

9、颜色取色

平常用的一般包括 

1. 用颜色关键字来指定颜色
2. hex
3. RGB
4. RGBA
5. HSL
6. HSLA

hex 说明：#RRGGBB 或 #RGB取值：RR：红色值。十六进制正整数GG：绿色值。十六进制正整数BB：蓝色值。十六进制正整数复制代码

RGB(R,G,B)取值：R：红色值。正整数 | 百分数G：绿色值。正整数 | 百分数B：蓝色值。正整数 | 百分数复制代码

RGBA(R,G,B,A)取值：R：红色值。正整数 | 百分数G：绿色值。正整数 | 百分数B：蓝色值。正整数 | 百分数A：Alpha透明度。取值0~1之间。复制代码

HSL(H,S,L)取值：H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360S：Saturation(饱和度)。取值为：0.0% - 100.0%L：Lightness(亮度)。取值为：0.0% - 100.0%//
    
    
    
     能看到此行背景说明你的浏览器支持HSL色彩记法
    
      复制代码

HSLA(H,S,L,A)取值：H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360S：Saturation(饱和度)。取值为：0.0% - 100.0%L：Lightness(亮度)。取值为：0.0% - 100.0%A：Alpha透明度。取值0~1之间。//
    
    
    
     能看到此行背景说明你的浏览器支持HSLA色彩记法
    
     复制代码

10、计算函数

calc()

说明：用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算；calc()函数支持 "+", "-", "*", "/" 运算；calc()函数使用标准的数学运算优先级规则；复制代码

11、渐变

gradient

语法：
    
      = linear-gradient() | repeating-linear-gradient() | radial-gradient() | repeating-radial-gradient()说明：
     
       允许使用简单的语法实现颜色渐变，以便UA在渲染页面自动生成图像。渐变在一个拥有尺寸的盒子中被生成，被称之为渐变盒，但是渐变本身并没有内在的尺寸，也就说如果在一个没有尺寸的容器上定义渐变，将无法被呈现。
      
        可以应用在所有接受图像的属性上示例：background-image: linear-gradient(white, gray);list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%);复制代码
      
     
    

linear-gradient

示例代码：

• 使用过时的语法：-webkit-gradient(linear,…)
• IE6.0-9.0使用私有滤镜来实现该效果:

    
    
    
    
    
    
    
      复制代码

radial-gradient

一段代码示例 不多说了

    
    
    
    
    
    
    
    
      复制代码

repeating-linear-gradient()

    
    
    
    
    
    
      复制代码

repeating-radial-gradient()

    
    
    
    
    
      复制代码

12、技巧与经验

如何清除图片下方出现几像素的空白间隙？方法1：img{display:block;}方法2：img{vertical-align:top;}除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的
    
     和
     
      值都可以方法3：#test{font-size:0;line-height:0;}#test为img的父元素如何让文本垂直对齐文本输入框？方法：input{vertical-align:middle;}如何让单行文本在容器内垂直居中？方法：#test{height:25px;line-height:25px;}只需设置文本的行高等于容器的高度即可如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果？方法：a:link{color:#03c;}a:visited{color:#666;}a:hover{color:#f30;}a:active{color:#c30;}按L-V-H-A的顺序设置超链接样式即可，可速记为LoVe（喜欢）HAte（讨厌）为什么Standard mode下IE无法设置滚动条的颜色？方法：html{	scrollbar-3dlight-color:#999;	scrollbar-darkshadow-color:#999;	scrollbar-highlight-color:#fff;	scrollbar-shadow-color:#eee;	scrollbar-arrow-color:#000;	scrollbar-face-color:#ddd;	scrollbar-track-color:#eee;	scrollbar-base-color:#ddd;}将原来设置在body上的滚动条颜色样式定义到html标签选择符上即可如何使文本溢出边界不换行强制在一行内显示？方法：#test{width:150px;white-space:nowrap;}设置容器的宽度和white-space为nowrap即可，其效果类似
      
       标签如何使文本溢出边界显示为省略号？方法（此方法Firefox5.0尚不支持）：#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。如何使连续的长字符串自动换行？方法：#test{width:150px;word-wrap:break-word;}word-wrap的break-word值允许单词内换行如何清除浮动？方法1：#test{clear:both;}#test为浮动元素的下一个兄弟元素方法2：#test{display:block;zoom:1;overflow:hidden;}#test为浮动元素的父元素。zoom:1也可以替换为固定的width或height方法3：#test{zoom:1;}#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}#test为浮动元素的父元素如何定义鼠标指针的光标形状为手型并兼容所有浏览器？方法：#test{cursor:pointer;}若将cursor设置为hand，将只有IE和Opera支持，且hand为非标准属性值如何让已知高度的容器在页面中水平垂直居中？方法：#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？方法：#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}#test p{*position:absolute;*top:50%;*left:50%;margin:0;}#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}#test是img的祖父节点，p是img的父节点。如何设置span的宽度和高度（即如何设置内联元素的宽高）？方法：span{display:block;width:200px;height:100px;}要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，或者position属性等等。如何给一个元素定义多个不同的css规则？方法：.a{color:#f00;}.b{background:#eee;}.c{background:#ccc;}
       
        测试1
       
       
        测试2
       
多个规则之间使用空格分开，并且只有class能同时使用多个规则，id不可以如何让某个元素充满整个页面？方法：html,body{height:100%;margin:0;}#test{height:100%;}如何让某个元素距离窗口上右下左4边各10像素？方法：html,body{height:100%;margin:0;}html{_padding:10px;}#test{position:absolute;top:10px;right:10px;bottom:10px;left:10px;_position:static;_height:100%;}如何去掉超链接的虚线框？方法：a{outline:none;}IE7及更早浏览器由于不支持outline属性，需要通过js的blur()方法来实现，如
       
        
        
         我是不透明的内容
        
原理是容器层与内容层并级，容器层设置透明度，内容层通过负margin或者position绝对定位等方式覆盖到容器层上方法2：.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}.outer .inner{position:relative\9;}
        
	
         
          我是不透明的内容
         
        
高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果如何让整个页面水平居中？方法：body{text-align:center;}#test2{width:960px;margin:0 auto;text-align:left;}定义body的text-align值为center将使得IE5.5也能实现居中为什么容器的背景色没显示出来？为什么容器无法自适应内容高度？方法：通常出现这样的情况都是由于没有清除浮动而引起的，所以Debug时应第一时间想到是否有未清除浮动的地方如何做1像素细边框的table？方法1：#test{border-collapse:collapse;border:1px solid #ddd;}#test th,#test td{border:1px solid #ddd;}
        
	         
          
           
姓名
           
Joy Du
          
           
           
年龄
           
26
          
         
        
方法2：#test{border-spacing:1px;background:#ddd;}#test tr{background:#fff;}如何区别display:none与visibility:hidden？方法：相同的是display:none与visibility:hidden都可以用来隐藏某个元素； 不同的是display:none在隐藏元素的时候，将其占位空间也去掉；而visibility:hidden只是隐藏了内容而已，其占位空间仍然保留。如何设置IE下的iframe背景透明？方法：设置iframe元素的标签属性allowtransparency="allowtransparency"然后设置iframe内部页面的body背景色为transparent。 不过由此会引发IE下一些其它问题，如：设置透明后的iframe将不能遮住select复制代码
      
     
    

1附录：

媒体类型 Media Types