1、import
import要放在内部规则前面，不然就会无效；
impor 引入多个文件，会出现闪烁，浏览器会先去下载import引入的css文件，然后再去解析，应该避免使用import
2、important
important优先级最高。但important IE6下的bug;
IE6及以下浏览器有个比较显式的支持问题存在，!important并不覆盖掉在同一条样式的后面的规则。请看下述代码：
div{color:#f00!important;color:#000;}
在上述代码中，IE6及以下浏览器div的文本颜色为#000
!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00
div{color:#f00!important;} div{color:#000;} 在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00
3、自适应布局
overflow:hidden，通过设置overflow:hidden;可以使得content宽度自适应。
<style>
.demo{
960px;
height:500px;
margin:0 auto;
}
.aside{
float:left;
200px;
height:200px;
margin-right:20px;
background:#aaa;
}
.content{
height:200px;
overflow:hidden;
background:#0ff;
}
.inner{
margin:0 10px 0 10px;
}
</style>
<div class="demo">
<div class="inner">
<div class="aside">aside</div>
</div>
<div class="content">通过设置overflow:hidden;可以使得content宽度自适应,但是如果把aside的float设置成left，还要调整边距
</div>
</div>
4、行高
IE6 元素有固定的行高，当高度小于最小的行高时，即使定义更小的高度仍然会失效。但可以通过设置overflow:hidden解决
.demo{
500px;
height:1px;
overflow:hidden;
background:#aaa;
}
<div class="demo"></div>
5、css选择器
1.子选择器E>F，选择所有作为E元素的子元素F。
2.相邻选择器 E+F，选择紧贴在E元素之后F元素。
3.兄弟选择器 E~F，选择E元素后面的所有兄弟元素F。
4.nth-child（n），n是从1开始计数的，类似这样的都是从1开始计数。
5.E:last-child：匹配父元素的最后一个子元素E。要使该属性生效，E对象必须是某个对象的子元素。
6、target
匹配相关url指向的元素；
.b:target{color:#f00}
<a href="#a">click</a>
<div id="a">change red</div>
css target使用前提：a便签的href的取值要与匹配的便签的id一致；
7、增强表单
为什么加大响应区域：
增强用户体验
以复选框为例：
原本：你只能点击中复选框才能选中或者取消选中
增强：当你点击复选框或它旁边的文本时都能选中或者取消选中
使用label标签：
<label for="blue"><input type="checkbox" id="blue" />蓝色</label>
或者：
<input type="checkbox" id="blue" /><label for="blue">蓝色</label>
这里利用的是 label 标签的 for 属性，for 的值和需要加强响应区域的复选框的id相同即可，与位置无关；
在label中设置for属性，使其取值等于input id的取值，来兼容ie6；
想在一行的最后，点击任然可以选中，可以这样设置，感觉这样需求不多
<label for="blue"><input type="checkbox" id="blue" />蓝色</label>
.label{
display:block; /*因为行内元素没有宽高*/
}
<label for="blue"><input type="checkbox" id="blue" />蓝色</label>
8、checked伪类
匹配用户界面上处于选中的元素，常用于input type为radio与checkbox；
<style>
input:checked+span{background:#f00;}
input:checked+span:after{content:" 我被选中了";}
</style>
<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>
checkbox可以实现选中多个，不互斥；而radio可以实现互斥，只能选中其中的一个。
通过checked可以实现隐藏、显示之间的切换。
9、transform
允许我们对元素进行旋转、缩放、移动或倾斜，这里只对缩放进行解释；
浏览器默认字体大小是12px，如果希望页面字体大小为10px；
<style>
.demo{
font-size:11px;
-webkit-transform:scale(10/12);
}
span{
display:inline-block;
}
</style>
<span class="demo">非大声道大神发</span>
缩放比例是相对于浏览器默认的字体大小进行设置，还要对span进行设置
10、border
border-color的取值依赖于color的取值，同样可以对border-color进行设置。