1. overflow:hidden和zoom：1
verflow:hidden;的作用
1. 隐藏溢出 ；2.消除浮动
<style type="text/css"> #div1 { height:auto;border:solid 1px red;zoom:1;overflow:hidden;} #div2 {float:left; height:100px;width:100px;background:blue;} </style> <div id="div1"> <div id="div2"></div> </div>
zoom:1的作用
兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：
触发IE浏览器的haslayout
解决ie下的浮动，margin重叠等一些问题。
2.ul li
左导航栏的li的链接图标
.main-left ul.nav02 li a { background: url(../images/left-ico.gif) 35px -151px no-repeat; text-indent: 50px; //文本缩进 color: #272727; font-weight: normal; display: block; }
3.dl dd dt
示例：
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
4.outline
经常碰到在chrome、火狐（以及360）下，input（输入框、按钮等）在得到焦点时，出现黄色（蓝色）边框
改变颜色
input {outline-color:yellow; }
去掉颜色
input{outline:0px;} 或 input{outline:none;}
5.背景色渐变按钮
eg：灰色按钮
.btn_gray { border: 1px solid #ddd; border-radius: 2px; margin-top: 0; background: #f7f7f7; text-align: center; text-decoration: none; cursor: pointer; color: #333; background: -ms-linear-gradient(top,#f7f7f7,#f2f2f2); background: -moz-linear-gradient(top,#f7f7f7,#f2f2f2); background: -webkit-gradient(linear,0 0,0 100%,from(#f7f7f7),to(#f2f2f2)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7f7f7", endColorstr="#f2f2f2")"; } .btn_gray:hover { box-shadow: 0 1px 1px rgba(0,1,1,.08); cursor: pointer; color: #333; background: -ms-linear-gradient(top,#f9f9f9,#f6f6f6); background: -moz-linear-gradient(top,#f9f9f9,#f6f6f6); background: -webkit-gradient(linear,0 0,0 100%,from(#f9f9f9),to(#f6f6f6)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#f9f9f9", endColorstr="#f6f6f6")"; }
6.背景图片（兼容）
filter必须使用可使用的绝对路径，兼容ie处理示例：
i { width: 40px; height: 40px; display: inline-block; background: url(images/lu_r_red.png) no-repeat; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.nihaobaixing.com/Content/images/lu_r_red.png',sizingMethod='scale'); background-size: 40px 40px; cursor: pointer; }
