Css 常用属性

时间：2024-01-10 16:08:08

1. overflow:hidden和zoom：1

verflow:hidden;的作用

1. 隐藏溢出 ；2.消除浮动

<style type="text/css">

#div1 { height:auto;border:solid 1px red;zoom:;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: #;

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

    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;

}

相关文章