CSS 浮動的16條規則——如果浮動非替換元素,則要指定一個明確的寬度;否則,它們會盡可能地窄

http://sishuok.com/forum/posts/list/2198.html


1.浮動元素會從文檔正常流中刪除,但它仍會影響佈局

2.浮動非替換元素必須爲其指定width,否則元素的width會趨於0而導致浮動元素不能完整顯示
3.一旦元素具有了浮動屬性,它便成爲了一個塊級元素。
4.浮動元素的左右外邊界不能超出包含塊的左右內邊界
5.浮動元素永不會重疊


6.浮動元素不會超過容器的上padding
7.後浮動的元素永不會超過先浮動元素的頂端
8.浮動元素會盡可能高地放置,便這個高受限於規則6和規則7
9.浮動元素的下邊界沒有要求,因此當容器不足以容下浮動元素時,浮動元素會向下延伸。但部分瀏覽器會採取增大容器高度以容下浮動元素

,而對於符合CSS2.1規範的瀏覽器要想讓容器容下浮動元素的一個可行方法是:讓容器也浮動
10.浮動元素向下延伸時,不會影響正常文本的顯示,文本會相對於浮動元素進行偏移。但部分文本背景會被浮動元素遮住

11.如果浮動元素設置了負的外邊距、這將破壞規則4、6、7
12.當浮動元素的width>容器的width時,這會使得浮動元素超出容器的左右邊界(超左超右依浮動方向而定)
13.浮動重疊規則:行內框(如strong)與浮動元素重疊時,其邊框、背景、內容均位於浮動元素之上;塊框與浮動元素重疊時,其邊框、背景在

浮動元素之下,而內容在浮動元素之上。
14.對某個元素應用clear:left,意味着這個元素的左邊不能有浮動元素。
15.clear不能用於非塊級元素,比如<br/>,在大多數瀏覽器看來它是一個非塊級元素,因此如果對br應用clear來清除浮動不會有任何效果,

除非改變br的display:block。
16.如果某元素應用clear清除浮動,則此元素設置的上外邊距值會被忽略,但會有一個重新計算的上外邊距值(甚至可能爲0).如果希望此元素

與浮動元素之間有一個明確的間隔,可以在浮動元素上設置下外邊距。

*******************************************************************************************************************************************************************************

替換元素:

替換元素是瀏覽器根據其標籤的元素與屬性來判斷顯示具體的內容。

比如:<input /> type="text" 的是,這是一個文本輸入框,換一個其他的時候,瀏覽器顯示就不一樣

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替換元素,這些元素都沒有實際的內容。

非替換元素:

(X)HTML 的大多數元素是不可替換元素,他們將內容直接告訴瀏覽器,將其顯示出來。

比如<p>wanmei.com</p>

瀏覽器將把這段內容直接顯示出來。

除了這兩字,還有兩種非常屬性的元素,顯示元素,他分爲兩種情況,一種是‘塊及元素’ ‘block’,還有一種是“行內元素”inline,大家也叫“內聯元素”。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章