《CSS權威指南》學習記錄 浮動

2021-07-13 07:39:32 字數 2690 閱讀 9754

關鍵字:float。可接受:left、right、none(預設值)。適用於所有元素。無繼承性。

乙個元素浮動時,其他元素會「圍繞」該元素。

浮動元素不會與周圍元素發生外邊距合併。

如果要浮動乙個非替換元素,則必須要為其宣告乙個width。

讓乙個元素浮動,它會像塊級元素一樣擺放和表現,但本質不變。

幾點規則:

1、浮動元素的左(右)外邊界不能超出其包含塊的左(右)內邊界。

帶圓圈的數字表示標記元素在源文件中的位置,帶方框的數字表示浮動元素的位置和大小。

2、浮動元素的左(右)外邊界必須是源文件中之前出現的浮動元素的右(左)外邊界,除非後來的浮動元素頂端在之前浮動元素的底端下面。

3、左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊;右浮動元素的左外邊界不會在其左浮動元素的右外邊界的左邊。o(╯□╰)o

這條規則可以防止重疊。假設有乙個body,寬度為500px,它有兩個影象,寬度都為300px,乙個浮動在左邊,乙個浮動在右邊。則第二個影象會被要求向下浮動,直到其頂端在左浮動元素底端之下。

4、乙個浮動元素的頂端不能比其父元素的內頂端更高。如果乙個浮動元素在兩個合併外邊距之間,放置這個浮動元素時就好像在兩個元素之間有乙個塊級父元素。

規則的前半部分可以防止浮動元素一直浮動到文件的頂端。規則的後半部分是對某些情況下的對齊進行微調——假設有三個段落,讓中間的段落浮動,這時,浮動段落就會像有乙個塊級父元素一樣浮動。這能防止浮動段落一直向上浮動到三個段落共同父元素的頂端。

5、浮動元素的頂端不能比之前所有浮動元素和塊級元素的頂端更高。

6、如果乙個浮動元素之前出現另乙個元素,則浮動元素的頂端不能比包含該元素生成框的任何行框的頂端更高。

這個規則進一步限制了元素的向上浮動。假設段落中間有乙個浮**像,則該影象的頂端最高只能放置在其所在行框的頂端。

7、左(右)浮動元素的左邊(右邊)有另外乙個浮動元素,則前者的右(左)外邊界不能超出其包含塊的右(左)邊界的右(左)邊。

也就是說,浮動元素不能超出其包含塊的邊界。當多個浮動元素在同一行時,如果放不下,後來的元素會向下浮動到新的一行。

8、浮動元素必須盡可能高地放置。

9、左浮動元素必須向左盡可能遠,右浮動元素必須向右盡可能遠。位置越高,就會向左或向右浮動得越遠。

當浮動元素比父元素高時,會超出父元素的底端(之前的規則並沒有對底端進行限制)。例如:

css指出:浮動元素會延伸,從而包含其所有後代浮動元素。所以,通過將父元素設定為浮動元素,就可以將浮動元素包含在其父元素內。

負外邊距可能導致浮動元素移到其父元素的外面。例如考慮乙個向左浮動的影象,它的左外邊距和上外邊距都是-15px,放在乙個div中,div沒有內邊距、外邊距、邊框:

那麼問題就來了:使用負外邊距時,如果浮動元素超出其父元素,文件會如何顯示?顯然,這取決於使用者**,由其決定是否重新顯示文件。

還有一種方法可以使浮動元素超出其父元素的左右內邊界,即浮動元素比父元素更寬。具體是向左超出還是向右超出,取決於浮動方式:

考慮乙個浮動元素與正常流中的內容發生重疊會如何顯示?

css規範明確指出:

1、行內框與乙個浮動元素重疊時,其邊框、背景和內容都在浮動元素之上顯示;

2、塊框與乙個浮動元素重疊時,其邊框、背景都在浮動元素之下顯示,而內容在其上顯示。

關鍵字:clear。可接受:left、right、both、none。應用於塊級元素。無繼承性。例如:

h3

/*使h3的左邊沒有浮動元素*/

css2.1中引入了清除區域(clearance)。清除區域是在元素上外邊距之上增加的額外間隔,不允許任何浮動元素進入這個範圍內。如果希望清除元素的頂端和浮動元素的底端有一定距離,可以為浮動元素設定乙個下外邊距。因為浮動元素的外邊距邊界定義了浮動框的邊界。

《CSS權威指南》學習記錄 列表

咖啡li 茶li 牛奶li ul 列表項內部可以使用段落 換行符 鏈結以及其他列表等等。咖啡li 牛奶li 茶li ol 列表項內部可以使用段落 換行符 鏈結以及其他列表等等。自定義列表不僅僅是一列專案,而是專案及其注釋的組合。自定義列表以 標籤開始。每個自定義列表項以 開始。每個自定義列表項的定義...

《CSS權威指南》學習記錄 定位(一)

利用定位,可以準確地定義元素框相對於其正常位置應該出現在 或者相對于父元素 另乙個元素甚至瀏覽器視窗本身的位置。關鍵字 position。可接受 static 預設值 relative absolute fixed。應用於所有元素。無繼承性。static 元素框正常生成。relative 元素框偏移...

《CSS權威指南》學習記錄 文字屬性

使用文字屬性,可以控制文字的顏色 字元間距,對齊文字,裝飾文字,對文字進行縮排等。p 通過使用text indent,可以將元素的第一行縮排乙個指定長度,甚至是負值。一般的,可以將其應用到所有塊級元素上,但不能應用到行內 inline 元素上,影象之類的替換元素也不行。不過,如果乙個塊級元素的首行中...