Css 常用属性

1. overflow:hidden和[b]zoom：1[/b]

verflow:hidden;的作用

[b]1. 隐藏溢出 ；2.消除浮动[/b]

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