CSS综合

1.保证网页去样式后的可读性，并且符合WEB标准。

2.组织CSS文件：base.css + common.css + page.css

3.base.css

     /*加入display:inline解决IE6双边距问题*/

    .fl {float:left;display:inline}

    .fr{float:right;display:inline}

 

    /*块级元素居中 但还必须设置宽度*/

    .bc{margin-left:auto;margin-right:auto}

 

4.清除浮动几种方式

    方式一：

    .clearfix:after {

   content: "020";/*是放一个空白字符*/

   display: block;

   height: 0;

   clear: both;

}

.clearfix {

   zoom: 1;

}

 

    方式二：

html body div.clear, html body span.clear

{

    background: none;

    border: 0;

    clear: both;

    display: block;

    float: none;

    font-size: 0;

    margin: 0;

    padding: 0;

    overflow: hidden;

    visibility: hidden;

    width: 0;

    height: 0;

}

5.CSS权重：HTML标签1、class 10、id 100，就近原则是指定义的先后顺序。

6.CSS HACK

    1.IE条件注释

    <!--[if IE]>

    <link type="text/css" href="test.css" rel="stylesheet" />

    <![endif]-->

 

    <!--[if gt IE 6]>

    <link type="text/css" href="test.css" rel="stylesheet" />

    <![endif]-->

    2.选择符前缀法

    <style type="text/css"

        .test{width:80px;}  /*IE6 IE7 IE8*/

        *html .test{}           /*only for IE6*/

        *+html .test{}         /*only for IE7*/

    </style>

    3.样式属性前缀法

     /*  IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_" */

    .test{width:80px;*width:70px;_width:60px}

7.a伪类的顺序：l(ink)ov(visited)e h(hover)a(active)te = love hate

8.行内元素设置width、height无效、竖直方向的padding、margin比较奇怪，块级元素即使设置宽度也要占一行

 

 

//待续