css + css3技术总结报告

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

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

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

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

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

来一张网上的权重图：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ssh test</title>
<meta name="author" content="" />
<style>
div#test span { color: green }  
span { color: blue }  
div span { color:red  }   
</style>
</head>
<body>

<div id="test">   
  <span>Text</span>  
</div>

</div>
</body>
</html>
      复制代码

效果如下：

解释：浏览器CSS匹配不是从左到右进行查找，而是 从右到左进行查找。比如div#test span { color: green }
，浏览器的查找顺序如下：先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为main的div元素，如果都存在则匹配上。

好处：浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素

解释：!important会提升优先级，可以说是优先级最高。

注：如果要覆盖一个!important，可以用另一个!important覆盖它。

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

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

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

总结

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

2、元素选择符

通配选择符 (*)

说明：

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

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

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>通配选择符 (*)_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
* {
  color: #f00;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>正文内容</p>
</body>
</html>
      
复制代码

类型选择符(E)

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>类型选择符 (E)_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1 {
  font-size: 20px;
}
p {
  font-size: 13px;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>正文内容</p>
</body>
</html>
      
复制代码

ID选择符(E#id)

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>id选择符 (E#myid)_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
#subtitle {
  font-size: 20px;
}
p#content {
  font-size: 13px;
}
</style>
</head>
<body>
<h1 id="subtitle">标题</h1>
<p id="content">正文内容</p>
</body>
</html>
      
复制代码

类选择符(E.class)

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

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

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>class选择符 (E.myclass)_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.title {
  font-size: 20px;
}
p.content {
  font-size: 13px;
}
.content.note {
  font-size: 30px;
}
</style>
</head>
<body>
<h1 class="title">标题</h1>
<p class="content">正文内容</p>
<p class="content note">多类选择符的使用</p>
</body>
</html>
      
复制代码

3、关系选择符

包含选择符(E F)

说明：选择所有被E元素包含的F元素。与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...
<style>
	/* 包含选择符(E F) */
	.demo div { border:1px solid #f00; }
	/* 子选择符(E>F) */
	.demo > div { border:1px solid #f00; }
</style>
<div class="demo">
	<div>0
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
</div>此例，如果使用.demo div，那么 0, 1, 2, 3 都有有边框；如果使用 .demo > div，那么只有 0 有边框，即只有子元素会被命中；

总结：.demo div 匹配到子 孙 所有后台
      .demo > div 只能匹配到子
复制代码

子选择符(E>F)

说明：选择所有作为E元素的子元素F。是子元素 不包含孙元素与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。示例：.demo > div {
	position: relative;
}

<div class="demo">
	<div class="a">
		<div class="b">子选择符</div>
	</div>
</div>此例只有 .a 会被命中，因为它是 .demo 的子元素；复制代码

相邻选择符(E+F)

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

兄弟选择符(E~F)

同上复制代码

4、属性选择符

E[att]

说明：选择具有att属性的E元素。例如：<style>
img[alt] {
	margin: 10px;
}
</style>

<img src="图片url" alt="" />
<img src="图片url" />
<img src="图片url" alt="" />
此例，将会命中第一、 三张图片，因为匹配到了alt属性复制代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>属性选择符 E[att]_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
a[class] {
  color: #f00;
}
</style>
</head>
<body>
<ul>
  <li><a href="?" class="external">外部链接</a></li>
  <li><a href="?">内部链接</a></li>
  <li><a href="?" class="external">外部链接</a></li>
  <li><a href="?">内部链接</a></li>
</ul>
</body>
</html>
      
复制代码

E[att="val"]

说明：选择具有att属性且属性值等于val的E元素。例如：<style>
input[type="text"] {
	border: 2px solid #000;
}
</style>

<input type="text" />
<input type="submit" />此例，将会命中第一张input，因为匹配到了alt属性，并且属性值为text复制代码

E[att~="val"]

说明：选择具有att属性且其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。例如：<style>
div[class~="a"] {
	border: 2px solid #000;
}
</style>

<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值中有一个值为a复制代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>属性选择符 E[att~="val"]_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
a[class~="external"] {
  color: #f00;
}
</style>
</head>
<body>
<ul>
  <li><a href="?" class="external txt">外部链接</a></li>
  <li><a href="?" class="txt">内部链接</a></li>
  <li><a href="?" class="external txt">外部链接</a></li>
  <li><a href="?" class="txt external">外部链接</a></li>
  <li><a href="?" class="txt">内部链接</a></li>
</ul>
</body>
</html>
      
复制代码

E[att^="val"]

说明：选择具有att属性且属性值为以val开头的字符串的E元素。例如：<style>
div[class^="a"] {
	border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>此例，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头复制代码

E[att$="val"]

说明：选择具有att属性且属性值为以val结尾的字符串的E元素。例如：<style>
div[class$="c"] {
	border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾复制代码

E[att*="val"]

说明：选择具有att属性且属性值为包含val的字符串的E元素。例如：<style>
div[class*="b"] {
	border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>此例，将会命中所有div，因为匹配到了class属性，且属性值中都包含了b复制代码

E[att|="val"]

说明：选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。例如：<style>
div[class|="a"] {
	border: 2px solid #000;
}
</style>

<div class="a-test">1</div>
<div class="b-test">2</div>
<div class="c-test">3</div>此例，将会命中第一个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

说明：
设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。

webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>用户行为伪类选择符 E:focus_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1 {
  font-size: 16px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
input:focus {
  background: #f6f6f6;
  color: #f60;
  border: 1px solid #f60;
  outline: none;
}
</style>
</head>
<body>
<h1>请聚焦到以下输入框</h1>
<form action="#">
  <ul>
    <li><input value="姓名" /></li>
    <li><input value="单位" /></li>
    <li><input value="年龄" /></li>
    <li><input value="职业" /></li>
  </ul>
</form>
</body>
</html>
      
复制代码

E:lang(fr)

说明：匹配使用特殊语言的E元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>语言伪类选择符 E:lang(fr)_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p:lang(zh-cmn-Hans) {
  color: #f00;
}
p:lang(en) {
  color: #090;
}
</style>
</head>
<body>
<p lang="zh-cmn-Hans">大段测试文字</p>
<p lang="en">english</p>
</body>
</html>
      
复制代码

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;
}
<body>
<ul class="test">
  <li>列表项一</li>
  <li>列表项二</li>
  <li>列表项三</li>
</ul>
</body>
上述代码：非IE文本将为black，IE9及以上为purple，IE8为yellow，IE7为blue，IE6为red复制代码

//重点来了

E:first-child

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

来看这样一段代码：示例代码：p:first-child{color:#f00;}

<div>
	<p>我是一个p</p>
</div>这段代码你能看到p元素被命中变成了红色假设将代码简单地修改一下：示例代码：p:first-child{color:#f00;}

<div>
	<h2>我是一个标题</h2>
	<p>我是一个p</p>
</div>只是在p前面加了一个h2标签，你会发现选择器失效了，没有命中p，why?复制代码

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

几乎同上复制代码

E:only-child css3

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

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:only-child_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1 {
  font-size: 16px;
}
li:only-child {
  color: #f00;
}
</style>
</head>
<body>
<h1>只有唯一一个子元素</h1>
<ul>
  <li>结构性伪类选择符 E:only-child</li>
</ul>
<h1>有多个子元素</h1>
<ul>
  <li>结构性伪类选择符 E:only-child</li>
  <li>结构性伪类选择符 E:only-child</li>
  <li>结构性伪类选择符 E:only-child</li>
</ul>
</body>
</html>
      
复制代码

效果如下：

E:nth-child(n) css3

说明：匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成：E:nth-child(2n)使用E:nth-child(n)实现奇偶：示例代码：<style>
li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */
</style>

<ul>
	<li>列表项一</li>
	<li>列表项二</li>
	<li>列表项三</li>
	<li>列表项四</li>
</ul>因为(n)代表一个乘法因子，可以是0, 1, 2, 3, ..., 所以(2n)换算出来会是偶数，而(2n+1)换算出来会是奇数复制代码

该选择符允许使用一些关键字，比如：odd, even使用odd, even实现奇偶：<style>
li:nth-child(even){color:#f00;} /* 偶数 */
li:nth-child(odd){color:#000;} /* 奇数 */
</style>

<ul>
	<li>列表项一</li>
	<li>列表项二</li>
	<li>列表项三</li>
	<li>列表项四</li>
</ul>关键字odd代表奇数，even代表偶数复制代码

注意：

<div>
	<p>第1个p</p>
	<p>第2个p</p>
	<span>第1个span</span>
	<p>第3个p</p>
	<span>第2个span</span>
	<p>第4个p</p>
	<p>第5个p</p>
</div>
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示例代码：<div>
	<p>第1个p</p>
	<p>第2个p</p>
	<span>第1个span</span>
	<p>第3个p</p>
	<span>第2个span</span>
</div>如上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

说明：
匹配同类型中的第一个同级兄弟元素E。

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

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:first-of-type_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p:first-of-type {
  color: #f00;
}
</style>
</head>
<body>
<div class="test">
  <div>我是一个div元素</div>
  <p>我是一个p元素</p>
  <p>我是一个p元素</p>
</div>
</body>
</html>
      
复制代码

E:last-of-type css3

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

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:last-of-type_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p:last-of-type {
  color: #f00;
}
</style>
</head>
<body>
<div class="test">
  <div>我是一个div元素</div>
  <p>我是一个p元素</p>
  <p>我是一个p元素</p>
</div>
</body>
</html>
      
复制代码

E:only-of-type css3

说明：
匹配同类型中的唯一的一个同级兄弟元素E。同级元素如果有两个则失效同 :only-child

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:only-of-type_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p:only-of-type {
  color: #f00;
}
</style>
</head>
<body>
<div class="test">
  <p>结构性伪类选择符 E:only-of-type</p>
</div>
</body>
</html>
      
复制代码

E:nth-of-type(n) css3

有一点需要注意的是：HTML示例代码：<div>
	<p>第1个p</p>
	<p>第2个p</p>
	<span>第1个span</span>
	<p>第3个p</p>
	<span>第2个span</span>
</div>如上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。复制代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:nth-last-of-type(n)_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p:nth-last-of-type(1) {
  color: #f00;
}
</style>
</head>
<body>
<div class="test">
  <p>我是一个p元素</p>
  <div>我是一个div元素</div>
  <p>我是一个p元素</p>
  <p>我是一个p元素</p>
  <span>我是一个span元素</span>
</div>
</body>
</html>
      
      
复制代码

E:checked css3

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

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>用户界面(UI)元素状态伪类选择符 E:checked_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
input:checked + span {
  background: #f00;
}
input:checked + span:after {
  content: " 我被选中了";
}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
  <legend>选中下面的项试试</legend>
  <ul>
    <li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
    <li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
    <li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
  </ul>
</fieldset>
<fieldset>
  <legend>选中下面的项试试</legend>
  <ul>
    <li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
    <li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
    <li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
  </ul>
</fieldset>
</form>
</body>
</html>
      
复制代码

E:enabled css3

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

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>用户界面(UI)元素状态伪类选择符 E:enabled_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
li {
  padding: 3px;
}
input[type="text"]:enabled {
  border: 1px solid #090;
  background: #fff;
  color: #000;
}
input[type="text"]:disabled {
  border: 1px solid #ccc;
  background: #eee;
  color: #ccc;
}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
  <legend>E:enabled与E:disabled</legend>
  <ul>
    <li><input type="text" value="可用状态" /></li>
    <li><input type="text" value="可用状态" /></li>
    <li><input type="text" value="禁用状态" disabled="disabled" /></li>
    <li><input type="text" value="禁用状态" disabled="disabled" /></li>
  </ul>
</fieldset>
</form>
</body>
</html>
      
复制代码

E:disabled css3

同上复制代码

//重点结束

E:empty css3

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

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:empty_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p:empty {
  height: 25px;
  border: 1px solid #ddd;
  background: #eee;
}
</style>
</head>
<body>
<div class="test">
  <p>结构性伪类选择符 E:empty</p>
  <p><!--我是一个空节点p，请注意我与其它非空节点p的外观有什么不一样--></p>
  <p>结构性伪类选择符 E:empty</p>
</div>
</body>
</html>
      
复制代码

E:target css3

说明：匹配相关URL指向的E元素。解释：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。示例代码：#demo:target{color:#f00;}

<div id="demo">
	<p>E:target伪类使用方法</p>
</div>假设上述代码在页面 a.html 中，那么当访问 a.html#demo 时，这个div元素将会被:target命中复制代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>目标伪类选择符 E:target_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test .hd{padding:10px 0;}
.test .nav{position:fixed;right:10px;left: 540px;}
.test .nav a{display:block;margin: 10px 0;}
.test .bd .panel{width:500px;margin-top:5px;border:1px solid #ddd;}
.test .bd h2{border-bottom:1px solid #ddd;}
  
.test .bd .panel:target{border-color:#f60;}
.test .bd .panel:target h2{color:red;}
  
h2,p{margin:0;padding:10px;font-size:16px;}
</style>
</head>
<body>
<div class="test">
  <div class="hd nav">
    <a href="#panel1">前往区块1</a>
    <a href="#panel2">前往区块2</a>
    <a href="#panel3">前往区块3</a>
    <a href="#panel4">前往区块4</a>
    <a href="#panel5">前往区块5</a>
  </div>
  <div class="bd">
    <div id="panel1" class="panel">
      <h2>区块1</h2>
      <div><p>区块1内容</p><p>区块1内容</p><p>区块1内容</p></div>
    </div>
    <div id="panel2" class="panel">
      <h2>区块2</h2>
      <div><p>区块2内容</p><p>区块2内容</p><p>区块2内容</p></div>
    </div>
    <div id="panel3" class="panel">
      <h2>区块3</h2>
      <div><p>区块3内容</p><p>区块3内容</p><p>区块3内容</p></div>
    </div>
    <div id="panel4" class="panel">
      <h2>区块4</h2>
      <div><p>区块4内容</p><p>区块4内容</p><p>区块4内容</p></div>
    </div>
    <div id="panel5" class="panel">
      <h2>区块5</h2>
      <div><p>区块5内容</p><p>区块5内容</p><p>区块5内容</p></div>
    </div>
  </div>
</div>
</body>
</html>
      
复制代码

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复制代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>E::first-letter_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1{font-size:16px;}
p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;}
p:first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
</style>
</head>
<body>
<h1>杂志常用的首字下沉效果</h1>
<p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>
</body>
</html>
   复制代码

效果如下：

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。复制代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>E::first-line_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1{font-size:16px;}
p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;}
p:first-line {color:#090;}
p::first-line {color:#090;}
</style>
</head>
<body>
<h1>第一行文字的颜色与其它不同</h1>
<p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>
</body>
</html>
      
复制代码

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来激活复制代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>E::after_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p{position:relative;color:#f00;font-size:14px;font-size:0\9;*font-size:14px;}
p::before{position:absolute;left:0;background:#fff;color:#000;content:"你的浏览器只支持E:after";font-size:14px;}
p::before{position:absolute;left:0;background:#fff;color:#000;content:"你的浏览器支持E:after和E::after";font-size:14px;}
</style>
</head>
<body>
<p>Sorry, 你的浏览器不支持E:after和E::after</p>
</body>
</html>
      
      
复制代码

效果：

注意： 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);复制代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@import_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
@import url("style.css") screen, print;
.test{
color:green;
}
</style>
</head>
<body>
<div class="test">
fdd
</div>
</body>
</html>
      
如果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);
<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>复制代码

列举几种使用方式：@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){ … }复制代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@media_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test,
.test2 {
  display: none;
}
/* 本条为CSS2部分，IE8及以下只支持本条 */
@media screen {
  body{ color: #f00; }
}
/* 下列为CSS3部分 */
@media screen and (min-width: 960px) {
  body{ background: #999; }
}
@media screen and (device-width: 1024px) {
  .test { display: block; }
}
@media screen and (width: 1024px) {
  .test2 { display: block; }
}
</style>
</head>
<body>
<div>Media Queries媒体查询</div>
<div class="test">如果你的显示器水平分辨率为1024px的话将能看到本条规则的效果（取决于输出设备屏幕分辨率的大小，不随包括浏览器在内的窗体大小而改变）</div>
<div class="test2">如果视口宽度为1024px的话将能看到本条规则的效果（随包括浏览器在内的窗体大小而改变）</div>
</body>
</html>
      
复制代码

@font-face

语法：

@font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*; <font>; }

示例：使用一个全浏览器兼容的自定义字体
代码如下：@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种格式的字体复制代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@font-face_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
@font-face {
  font-family: 'iconfont';
  src: url('http://at.alicdn.com/t/font_1397098551_95441.eot');
  src: url('http://at.alicdn.com/t/font_1397098551_95441.eot?#iefix') format('embedded-opentype'),
  url('http://at.alicdn.com/t/font_1397098552_0142624.woff') format('woff'),
  url('http://at.alicdn.com/t/font_1397098551_8732882.ttf') format('truetype'),
  url('http://at.alicdn.com/t/font_1397098552_0586202.svg#iconfont') format('svg');
}
body {
  font-family: 'iconfont';
  font-style: normal;
  font-size: 32px;
  line-height: 2;
  letter-spacing: .25em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
㐳㐴㐵㐶㐷㐸㐹㐺㐻㐼㐽㐾㐿㑀㑁㑂㑃㑄㑅㑆㑇㑈㑉㑊㑋㑌㑍㑎㑏
㑐㑑㑒㑓㑔㑕㑖㑗㑘㑙㑚㑛㑜㐲㐷㐸㐹㐺㐻㐼㐽㐾㐿㑀㑁㑂㑋㑌㑍㑎
㑏㑐㑑㑒㑓㑔㑕㑖㑗㑘㑙㑚㑛㑜㑝㑞㑟㑠㑡㑢㑣㑤㑥㑦㑧㓾㓿㔀㔁㔂㔃
</body>
</html>
      
复制代码

@keyframes

示例代码：@keyframes testanimations {
	from { opacity: 1; }
	to { opacity: 0; }
}其中testanimations是该动画的名字，该动画表示某个东西将逐渐消失。
如果复杂的动画，可以混合<percentage>去设置某个时间段内的任意时间点的样式：示例代码：@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，而都使用<percentage>：示例代码：@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是非标准语法（虽然被某些浏览器所支持）。复制代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@keyframes_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
#sport{position:relative;width:500px;height:400px;border:1px solid #ddd;}
#staff{position:absolute;z-index:3;bottom:10px;left:10px;overflow:hidden;width:180px;height:8px;border-radius:3px;background:#ddd;line-height:20;
  -webkit-animation:staff 3s linear;
  animation:staff 3s linear;
}
#ball{position:absolute;z-index:3;bottom:20px;left:90px;overflow:hidden;width:30px;height:30px;border-radius:15px;box-shadow:0 0 10px rgba(204,102,0,.8);background:#F6D66E;background:linear-gradient(top,#fff,#F6D66E);line-height:20;
  -webkit-animation:ball 3s linear;
  animation:ball 3s linear;
}
@-webkit-keyframes ball{
  0%{-webkit-transform:translate(0,0);}
  5%{-webkit-transform:translate(-90px,-100px);}
  18%{-webkit-transform:translate(0,-350px);}
  35%{-webkit-transform:translate(200px,0);}
  46%{-webkit-transform:translate(380px,-160px);}
  60%{-webkit-transform:translate(250px,-350px);}
  78%{-webkit-transform:translate(60px,0);}
  100%{-webkit-transform:translate(0,0);}
}
@keyframes ball{
  0%{transform:translate(0,0);}
  5%{transform:translate(-90px,-100px);}
  18%{transform:translate(0,-350px);}
  35%{transform:translate(200px,0);}
  46%{transform:translate(380px,-160px);}
  60%{transform:translate(250px,-350px);}
  78%{transform:translate(60px,0);}
  100%{transform:translate(0,0);}
}
@-webkit-keyframes staff{
  0%{-webkit-transform:translate(0,0);}
  6%{-webkit-transform:translate(260px,0);}
  20%{-webkit-transform:translate(300px,0);}
  30%{-webkit-transform:translate(300px,0);}
  40%{-webkit-transform:translate(200px,0);}
  65%{-webkit-transform:translate(40px,0);}
  79%{-webkit-transform:translate(0,0);}
  100%{-webkit-transform:translate(0,0);}
}
@keyframes staff{
  0%{transform:translate(0,0);}
  6%{transform:translate(260px,0);}
  20%{transform:translate(300px,0);}
  30%{transform:translate(300px,0);}
  40%{transform:translate(200px,0);}
  65%{transform:translate(40px,0);}
  79%{transform:translate(0,0);}
  100%{transform:translate(0,0);}
}
</style>
</head>
<body>
<div id="sport">
  <span id="ball">弹球</span>
  <span id="staff">滑杆</span>
</div>
</body>
</html>
      
复制代码

@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);
	}
}

复制代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@supports_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
@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;
    }
}
</style>
</head>
<body>
<div id="aside">aside</div>
<div id="main">main</div>
</body>
</html>
      
复制代码

8、取值与单位

长度单位包括包括：相对单位和绝对单位。相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin绝对长度单位包括有： 

cm, mm, q, in, pt, pc, px复制代码

px

说明：
相对长度单位。像素（Pixels）。1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px示例代码：div{font-size:12px;} p{text-indent:24px;}

em

说明：
相对长度单位。相对于当前对象内文本的字体尺寸。是相对于当前的对象不是跟元素html 。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的(html)默认字体尺寸。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>em_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 20px;line-height: 1em;height:3em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
</style>
</head>
<body>
<h1>假定当前默认字体尺寸是14px，n em即为14px字体尺寸的n倍：</h1>
<ul>
  <li class="size1">
    <strong>1em</strong>:
    <p>1em大小的文字</p>
  </li>
  <li class="size2">
    <strong>2em</strong>:
    <p>2em大小的文字</p>
  </li>
  <li class="size3">
    <strong>3em</strong>:
    <p>3em大小的文字</p>
  </li>
</ul>
</body>
</html>
      
      
复制代码

rem ie9+

说明：
相对长度单位。相对于根元素(即html元素) font-size计算值的倍数

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>rem_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
html,
h1 {
  font-size: 12px;
}
p {
  font-size: 2rem;
}
</style>
</head>
<body>
<h1>下面的文字将是html定义的字体大小的2倍：</h1>
<p>我是html定义的12px的2倍，字体大小为24px</p>
</body>
</html>
      
复制代码

vw viewPort width ie9+

说明：
相对于视口的宽度。视口被均分为100单位的vw
示例代码：

h1 { font-size: 8vw; }

如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>vw_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p {
  font-size: 5vw;
}
</style>
</head>
<body>
<p>相对于viewport宽度大小的文字</p>
</body>
</html>
      
复制代码

vh ie9+

说明：
相对于视口的高度。视口被均分为100单位的vh
示例代码：

h1 { font-size: 8vh; }

如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

vmax

说明：
相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
示例代码：

h1 { font-size: 8vmax; }

如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为24mm，即(8x300)/100，因为宽度比高度要大，所以计算的时候相对于宽度。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>vmax_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p {
  font-size: 5vmax;
}
</style>
</head>
<body>
<p>相对于viewport的宽度或高度中较大的那个然后计算文字大小。</p>
</body>
</html>
      
复制代码

vmin

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

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>vmin_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p {
  font-size: 12px;  /*IE6-8*/
  font-size: 5vm;    /*IE9*/
  font-size: 5vmin;  /*其他浏览器*/
}
</style>
</head>
<body>
<p>相对于viewport的宽度或高度中较小的那个然后计算文字大小。</p>
</body>
</html>
      
复制代码

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

9、颜色取色

平常用的一般包括

用颜色关键字来指定颜色
hex
RGB
RGBA
HSL
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%
//
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>HSL_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
  background-color: hsl(360, 50%, 50%);
}
</style>
</head>
<body>
<div class="test">能看到此行背景说明你的浏览器支持HSL色彩记法</div>
</body>
</html>
      

复制代码

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之间。//
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>HSL_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
  background-color: hsla(360, 50%, 50%, .5);
}
</style>
</head>
<body>
<div class="test">能看到此行背景说明你的浏览器支持HSLA色彩记法</div>
</body>
</html>
     
复制代码

10、计算函数

calc()

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

11、渐变

gradient

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

linear-gradient

示例代码：

linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);复制代码

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

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>linear-gradient()_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
div {
  width: 200px;
  height: 100px;
  margin-top: 10px;
  border: 1px solid #ddd;
}
.test {
  background: linear-gradient(#fff, #333);
}
.test2 {
  background: linear-gradient(#000, #f00 50%, #090);
}
.test3 {
  background: linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);
}
.test4 {
  background: linear-gradient(45deg, #000, #f00 50%, #090);
}
.test5 {
  background: linear-gradient(to top right, #000, #f00 50%, #090);
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
</body>
</html>
      
复制代码

radial-gradient

一段代码示例不多说了

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>radial-gradient()_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
div {
  width: 200px;
  height: 100px;
  margin-top: 10px;
  border: 1px solid #ddd;
}
.test {
  background: radial-gradient(circle at center, #f00, #ff0, #080);
}
.test2 {
  background: radial-gradient(circle closest-side, #f00, #ff0, #080);
}
.test3 {
  background: radial-gradient(farthest-side, #f00 20%, #ff0 50%, #080 80%);
}
.test4 {
  background: radial-gradient(at top right, #f00, #ff0, #080);
}
.test5 {
  background: radial-gradient(farthest-side at top right, #f00, #ff0, #080);
}
.test6 {
  background:
        radial-gradient(farthest-side at top right, #f00, #ff0, #080, transparent),
        radial-gradient(60px at top left, #f00, #ff0, #080);
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
<div class="test6"></div>
</body>
</html>
      
复制代码

repeating-linear-gradient()

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>repeating-linear-gradient()_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
div {
  width: 200px;
  height: 100px;
  margin-top: 10px;
  border: 1px solid #ddd;
}
.test {
  background: repeating-linear-gradient(#f00, #ff0 10%, #f00 15%);
}
.test2 {
  background: repeating-linear-gradient(to right, #f00, #ff0 10%, #f00 15%);
}
.test3 {
  background: repeating-linear-gradient(45deg, #f00, #ff0 10%, #f00 15%);
}
.test4 {
  background: repeating-linear-gradient(to bottom left, #f00, #ff0 10%, #f00 15%);
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
</body>
</html>
      
复制代码

repeating-radial-gradient()

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>repeating-radial-gradient()_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
div {
  width: 200px;
  height: 100px;
  margin-top: 10px;
  border: 1px solid #ddd;
}
.test {
  background: repeating-radial-gradient(circle, #f00 0, #ff0 10%, #f00 15%);
}
.test2 {
  background: repeating-radial-gradient(at top left, #f00, #ff0 10%, #080 15%, #ff0 20%, #f00 25%);
}
.test3 {
  background: repeating-radial-gradient(circle closest-corner at 20px 50px, #f00, #ff0 10%, #080 20%, #ff0 30%, #f00 40%);
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
</body>
</html>
      
复制代码

12、技巧与经验

如何清除图片下方出现几像素的空白间隙？
方法1：img{display:block;}
方法2：img{vertical-align:top;}
除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的
<length>和<percentage>值都可以
方法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即可，
其效果类似<nobr>标签

如何使文本溢出边界显示为省略号？
方法（此方法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;}
<div class="a b">测试1</div>
<div class="a c">测试2</div>多个规则之间使用空格分开，并且只有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()方法来实现，如<a onfocus="
this.blur();"

如何容器透明，内容不透明？
方法1：.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}
.inner{width:200px;height:200px;margin-top:-200px;}
<div class="outer"><!--我是透明的容器--></div>
<div class="inner">我是不透明的内容</div>原理是容器层与内容层并级，容器层设置透明度，内容层通过负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;}

<div class="outer">
	<div class="inner">我是不透明的内容</div>
</div>高级浏览器直接使用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;}
<table id="test">
	<tr><th>姓名</th><td>Joy Du</td></tr>
	<tr><th>年龄</th><td>26</td></tr>
</table>方法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

媒体类型	版本	兼容性	描述
aural	CSS2不推荐使用	Opera	用于语音和音乐合成器
braille	CSS2	Opera	用于触觉反馈设备
handheld	CSS2	Chrome,Safari,Opera	用于小型或手持设备
print	CSS2	所有浏览器	用于打印机
projection	CSS2	Opera	用于投影图像，如幻灯片
screen	CSS2	所有浏览器	用于计算机显示器
tty	CSS2	Opera	用于使用固定间距字符格的设备。如电传打字机和终端
tv	CSS2	Opera	用于电视类设备
embossed	CSS2	Opera	用于凸点字符（盲文）印刷设备
speech	CSS2	Opera	用于语音类型
all	CSS2	所有浏览器	用于所有媒体设备类型

css + css3技术总结报告

目录：

通配选择符 (*)

3、关系选择符

4、属性选择符

E:lang(fr)

E:nth-child(n) css3

E:nth-last-child(n) css3

E:last-of-type css3

E:only-of-type css3

E:nth-of-type(n) css3

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

E:checked css3

E:enabled css3

E:disabled css3

E:empty css3

E:target css3

E:after css3

@import css3

@charset

@media

@font-face

@keyframes

@supports

8、取值与单位

px

em

rem ie9+

vw viewPort width ie9+

vh ie9+

vmax

vmin

9、颜色取色

10、计算函数

calc()

11、渐变

repeating-linear-gradient()

repeating-radial-gradient()

相关文章：