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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。