css各种伪元素总结以及清除浮动方法总结

时间 2019-11-09

标签 css 各种元素总结以及清除浮动方法栏目 CSS 繁體版

原文原文链接

伪元素语法：

selector:pseudo-element {property:value;}

1.first-line伪元素：向文本的首行设置特殊格式；css

注意：　只能用于块级元素；　html

　　　　可应用于first-line伪元素的属性：font,color,background，word-spacing，letter-spacing，text-decoration，ide

　　　　 vertical-align，text-transform，line-height，clear布局

2：first-letter：向文本的首字母设置特殊样式；与first-line相似，不一样：vertical-align只能当float为none时有效。spa

3.before伪元素：在元素的内容前面插入新内容；.net

4.after伪元素：与before类似，做用是在元素内容后面插入新内容；firefox

另：能够用before或者after清除浮动（不被IE6/IE7支持）：code

1）orm

.clearDiv{
　　content:"";
　　display:block;
　　height:0;
　　clear:both;
　　visibility:hidden;
}
*html .clearDiv{
　　zoom:1;/*IE6*/
}
*+html .clearDiv{
　　zoom:1;/*IE7*/
}

（有一篇文章说到称之为清除浮动是不确切的，清除浮动是指clear,对应的css中的属性是：clear:left|right|both|none；闭合浮动：是浮动元素闭合，从而减小浮动带来的影响。）htm

说到这里就讲一下浮动的原理吧：浮动的框能够左右移动，直至它的外边缘遇到包含框或者另外一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动以后，不会影响到块级框的布局而只会影响内联框（一般是文本）的排列，文档中的普通流就会表现得和浮动框不存在同样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云同样，可是只能左右浮动。

正是由于浮动的这种特性，致使本属于普通流中的元素浮动以后，包含框内部因为不存在其余普通流元素了，也就表现出高度为0（高度塌陷）所以须要闭合浮动元素，使其包含框表现出正常的高度。

除了上面的伪元素关闭浮动元素的方法，下面还有几种：

2）添加额外标签：在浮动元素的父元素内容最后插入一个空标签div：

　该方法虽然简单易懂可是会增长html代码的冗余度，从语义化的角度来看是不合理的；

3）使用br标签和其自身的html属性：小众化方法，br有clear=“all | left | right | none”属性

<html>
<head>
<style>
.main{float:left;width: 100px;height: 100px;background-color: green;}
.side{float:right;width: 200px;height: 200px;background-color: yellow;}
.footer{width: 300px;height: 300px;background-color: pink;}
.warp{background-color: purple;overflow:hidden; *zoom:1;}
</style>
</head>
<body>
<div class="warp" id="float2">
<div class="main left"></div>
<div class="side left"></div>
<br clear="all" />
</div>
<div class="footer"></div>
</body>
</html>

这个方法比空标签语义稍强，代码量也少，可是一样有违结构和表现的分离；

4）父元素设置overflow:hidden （IE6中还须要除法hasLayout，eg:zoom:1）

<html>
<head>
<style>
.main{float:left;width: 100px;height: 100px;background-color: green;}
.side{float:right;width: 200px;height: 200px;background-color: yellow;}
.footer{width: 300px;height: 300px;background-color: pink;}
.warp{background-color: purple;overflow:hidden; *zoom:1;}
</style>
</head>
<body>
<div class="warp" id="float3">
<div class="main left"></div>
<div class="side left"></div>
</div>
<div class="footer"></div>
</body>
</html>

此方法不存在结构化和语义问题而且代码量也少，可是内容增多时不会自动换行致使内容被隐藏，没法显示须要溢出的元素；

5）父元素设置overflow:auto：IE6须要触发hasLayout，演示和3差很少

不存在结构和语义化问题，代码量极少；可是多个嵌套后，firefox某些状况会形成内容全选；IE中 mouseover 形成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无端产生focus等；

6）父元素也设置float：不存在结构和语义化问题，代码量极少，但使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用

7）父元素设置display：table：结构语义化彻底正确，代码量极少可是盒模型属性已经改变，由此形成的一系列问题，得不偿失，不推荐使用

触发hasLayout的条件：

position: absolute
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值（例如不少人清除浮动会用到 height: 1% ）
zoom: 除 “normal” 外的任意值
writing-mode: tb-rl

关于清除浮动的更多详细：http://blog.csdn.net/kongjiea/article/details/17614729

============再次补充伪元素的使用例子：：tr:nth-child(even | odd | an+b)==============

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。再分别设置an+0 至 an+b的样式；

请写一个表格以及对应的CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景。<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <title>表格</title>
        <style type="text/css">
            .tbl{
                border: 1px solid #ccc;
            }
            .tbl tr td{
                border: 2px solid blue;
            }
            .tbl tr:nth-child(even){
                background-color: white;
            }
            .tbl tr:nth-child(odd){
                background-color: gray;
            }
            .tbl tr:hover{
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <table class="tbl">
            <tr>
                <td>First row</td>
            </tr>
            <tr>
                <td>Second row</td>
            </tr>
            <tr>
                <td>Third row</td>
            </tr>
            <tr>
                <td>Fourth row</td>
            </tr>
            <tr>
                <td>Fifth row</td>
            </tr>
        </table>
    </body>
</html>