css文檔之盒模型閱讀筆記

標籤：包含   bsp   abs   分配   agent   完全   處理   改變   基礎知識   

　　前段時間抽空仔細閱讀了w3c的css文檔關於盒模型方面的一些基礎知識。邊讀邊記錄了一些要點，在此做些整理，與大家分享，如有理解有誤之處，請不吝指教。

1.綜述

文檔中的每個元素被描繪為矩形盒子。渲染引擎的目的就是判定大小，屬性——比如它的顏色、背景、邊框方面——及這些盒子的位置。

在CSS中，這些矩形盒子用 標準盒模型 來描述。這個模型描述了一個元素所佔用的空間。每一個盒子有四條邊界：外邊距邊界margin edge, 邊框邊界border edge, 內邊距邊界padding edge 與 內容邊界content edge。

下面這張圖是從MDN搬來的，畫的十分簡明易懂：

　　

 

2.margin的縱向摺疊

　　非浮動框元素周邊存在2個或者2個以上縱向margin值且二者之間沒有border、padding或者其它content存在時，二者之間的縱向距離取margin中的最大值。

　　橫向margin不產生摺疊。

 

3.auto屬性值與UA

• margin、padding、border、以及content的值為auto時，意味著他們的實際值由UA(user agent)分配。
• 橫向上例如：margin-left width margin-right中有一個值為auto，UA會確保3者相加等於父元素寬度而對auto值的屬性進行重新分配具體值。如果，3者都不為auto，那麼UA則會強制margin-right的值改為auto。
• 縱向上類似。
• 當margin-left width margin-right中超過一個值為auto時，如果width是其中之一，則UA會將margin-left、margin-right的值為設定為0，並賦予width的一個合適的值。如果margin-left、margin-right的值都為auto，UA則會將元素置中。
• 如果一個浮動元素或區塊層級元素的以上任何一個屬性的值為auto，那麼UA會將其當作‘0’處理。

 

4.line-height

　　原則上，line-height值賦予元素中文字的總高度。任何行內元素的margin、padding等值都無法改變元素的line-height。也就是說，如果元素的padding值太小，它有可能與其他行文字重疊。

　　

5.normal-flow、floats 與 absolute position 

     （1）normal-flow 包括block（塊級）, inline（行內）, relative position（相對定位） 3種盒模型；

• 塊級情境下，包含塊被依次擺放。預設縱向上自頂向下，橫向上僅靠父元素左邊界，區塊層級元素之間的距離又各自的margin值決定。 
• 行內模式下，預設元素水平排列，從左向右，自頂向下。橫向上的距離規則類似於區塊層級元素，縱向上受到vertical-align、line-height等屬性的影響。一個段落（line-box）的行之間不存在margin等屬性。
• 相對定位元模式下， 元素在normal-flow方式下布局後，還可以基於相對定位產生位移。這種位移對於其他元素不產生任何影響。

　　（2）float-flow（浮動模式）

• 浮動是指將一個元素浮動到改行的左邊或者右邊。
• 例如向左浮動的元素將被移動到父元素的左邊界或者前一個左浮動元素的右邊界。

　　（3）absolute-flow (絕對位置模式)

• 絕對位置是一種相對與其包含塊（父元素中第一個position為relative的元素）的精確定位。
• 絕對位置的元素被從normal-flow中完全移除。
• 絕對位置元素完全依據：top, bottom, left, right的屬性值來定位。
• 絕對位置元素的margin值不會摺疊。

6. float 與 clear

• clear:left 要求盒子的頂部邊框邊緣低於來源文件中較早元素產生的任何左側浮動框的底部外邊緣。
• clear:right 要求盒子的頂部邊框邊緣低於來源文件中較早元素產生的任何右側浮動框的底部外邊緣。
• clear:both 要求盒子的頂部邊框邊緣低於來源文件中較早元素產生的任何左側浮動框以及右側浮動框的底部外邊緣。

　　clear的計算方法：

• clear除“none”之外的值可能引入間隙，並阻止邊緣摺疊，作為元素邊緣頂部之上的間隔存在。 它用於將元素在垂直方向推過浮動元素的位置。通過首先確定元素的上邊界邊緣的假設位置來計算其上設定有“清除”的元素的間隙。 如果元素的‘clear‘屬性為‘none‘，這個位置就是實際上邊界的邊緣。如果元素的上邊界邊緣的這個假想位置不超過相關浮動，則引入間隙，並且邊緣根據規則摺疊。

css文檔之盒模型閱讀筆記