Css 常用属性

Posted 2020-07-23 黄银

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