CSS規範裏的一些事(一)

CSS規範裏的一些事

前言：如下內容總結於CSS2.1規範， http://www.ayqy.net/doc/css2-1/cover.html

1、盒子模型

以上圖形說的是盒子模型中的content、padding、border、margin邊界。

1. 樣式

   盒的內容區的尺寸—content width和content height —取決於幾個因素：生成該盒的元素是否設置了'width'或'height'屬性，該盒是否包含文本以及其它盒，該盒是否是表格等等。盒的內容，內邊距和邊框區域的背景樣式由生成（該盒的）元素的'background'屬性來指定。外邊距背景老是透明的。

2. 合併外邊距

   CSS中，兩個或多個盒（可能但不必定是兄弟）的相鄰的margin會被結合成一個margin。外邊距按這種方式結合叫作合併（collapse），產生的結合的外邊距叫作摺疊外邊距（collapsed margin 譯註：這裏譯做摺疊表示結果，與合併的動做區分開）

• 根元素盒的margin不合並；
• 若是一個帶有間隙（clearance 指clear屬性致使元素位置移動造成的間隙）的元素的上外邊距與下外邊距相鄰，它的外邊距會和緊挨着的兄弟（元素）的相鄰外邊距合併，但合併後不會再和父級塊的下外邊距合併；
• 水平margin不會合並；
• 兩個margin是相鄰的，當且僅當：

1. 都屬於流內（in-flow）塊級盒，處於同一個塊格式化上下文;
2. 沒有行框（line box），空隙，內邊距和邊框把它們隔開;
3. 都屬於垂直相鄰框邊界（vertically-adjacent box edges），即造成下列某一對：
   盒的上邊距與其第一個流內（in-flow）孩子的上邊距
   盒的下邊距與其下一個流內緊挨着的兄弟的上邊距
   最後一個流內孩子的下邊距與其height計算值爲'auto'的父元素的下邊距
   盒的上邊距和下邊距，要求該盒沒有創建新的塊格式化上下文，而且'min-height'計算值爲0，'height'計算值爲0或'auto'，尚未流內孩子摺疊外邊距也能與另外一個外邊距相鄰，只要其外邊距的任意一部分與那個外邊距相鄰就算

合併後的結果：
當兩個或者更多的margin合併時，產生的margin寬度爲被合併的外邊距寬度中的最大值。至於負margin，就從正相鄰margin的最大值中減去負相鄰margin的絕對值的最大值。若是沒有正margin，就用0減去相鄰margin的絕對值的最大值。若是該元素的外邊距與其父元素的上外邊距合併了，盒的上邊框邊界被定義爲與其父元素的相同不然，要麼該元素的父元素沒參與外邊距合併，要麼只涉及其父元素的下外邊距。該元素上邊框邊界的位置與元素下邊框非0時的位置相同。

1. 內邊距padding

   內邊距的屬性和外邊距的屬性相似， 有一點不一樣的是，內邊距padding不能爲負。

2. 邊框border

   這個屬性比較簡單， 有些樣式而已。

2、視覺格式化模型

在視覺格式化模型中，文檔樹中的每一個元素根據其盒模型生成0個或多個盒。這些盒的佈局由（如下因素）控制：

* 盒尺寸與類型
* 定位方案（常規流，浮動與絕對定位）
* 文檔樹中元素間的關係
* 外部信息（例如，視口大小，圖片的固有尺寸等等）

1. 包含塊

CSS 2.1中，不少盒的位置和大小是根據被稱爲包含塊的矩形框的邊界計算的。通常把生成的盒做爲後代盒的包含塊，咱們說一個盒爲其後代「創建」了包含塊。「一個盒的包含塊」表示「盒所在的包含塊」，而不是它生成的（包含塊）每一個盒都根據其包含塊肯定了一個位置，但它不受該包含塊的限制，可能會溢出

1. 塊級元素與塊盒

2. 行級元素與行內盒

   使用display屬性能夠定義block、inline-block、inline、list-item、none等樣式。如下分別是這幾種屬性的做用：

   • 該值會讓元素生成一個塊盒
   • 該值會讓元素生成一個行內級塊容器（inline-level block container）。一個inline-block的內部會被格式化成一個塊盒，而該元素自己會被格式化成一個原子行內級盒
   • 該值會讓元素生成一個或多個行內盒
   • 該值會讓元素（例如，HTML中的LI）生成一個主塊盒（principal block box）和一個標記盒（marker box）。關於列表及列表格式化示例的更多信息請查看列表章節
   • 該值會讓元素不在格式化結構（formatting structure）中出現（即在視覺媒體中，元素不會生成盒也不會影響佈局）。後代元素也不會生成任何盒，該元素及其內容會從格式化結構中所有移除。這種行爲不能經過給後代設置'display'屬性來重寫

3. 定位方案

   • 常規流 CSS 2.1中，常規流包括塊級盒的塊格式化（block formatting），
   • 行內級盒的行內格式化和塊級與行內級盒的相對定位

浮動 在浮動模型中，盒先根據常規流來放置，而後從常規流中取出來並儘量遠地向左或向右移動。其它內容可能沿着浮動（盒）的一側排列（Content may flow along the side of a float）

* 絕對定位 在絕對定位模型中，一個盒會從常規流中所有移除（它不會影響後面的兄弟元素）並根據包含塊肯定位置
* 若是一個元素是浮動的，絕對定位的或者是根元素，它就叫流外（out of flow）（元素）。若是一個元素不是流外的，就叫流內（in-flow）（元素）。

static
盒是個常規盒，根據常規流佈局。'top'，'right'，'bottom'和'left'屬性失效.
relative
盒的位置是根據常規流計算的（被稱爲常規流中的位置），而後盒相對於其常規位置偏移。當盒B爲相對定位時，後面的盒的位置仍按照B沒有偏移量來計算。table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和table-caption元素上'position:relative'的效果是未定義的
absolute
盒的位置（及可能的大小）由'top'，'right'，'bottom'和'left'屬性指定，這些屬性指定了相對於盒的包含塊的偏移量。絕對定位的盒脫離了常規流，意味着它們不會影響後面兄弟元素的佈局，並且，雖然絕對定位的盒有外邊距，但它們不會與任何其它外邊距合併
fixed
除了盒相對於某些參照（reference）是固定的（fixed）以外，盒的位置根據'absolute'模型來計算。如同'absolute'模型同樣，盒的外邊距不會與任何其它外邊距合併。

---

3、常規流

常規流中的盒屬於一個格式化上下文，多是塊或是行內（格式化上下文），但不能二者都是。塊級盒參與塊格式化上下文。行內級盒參與行內格式化上下文.

1. 塊格式化上下文

   浮動，絕對定位的元素，非塊盒的塊容器（例如inline-blocks，table-cells和table-captions），以及’overflow’不爲’visible’的塊盒（當該值已被傳播到視口時除外（except when that value has been propagated to the viewport））會爲其內容創建新的塊格式化上下文.

   在一個塊格式化上下文中，盒在垂直方向一個接一個地放置，從包含塊的頂部開始。兩個兄弟盒之間的垂直距離由'margin'屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的垂直外邊距會合並.

   在一個塊格式化上下文中，每一個盒的左外邊界（left outer edge）挨着包含塊的左外邊界（對於從右向左的格式化，右外邊界挨着）。即便存在浮動（儘管一個盒的行框可能會由於浮動而收縮 譯註：環繞浮動元素放置的行框比正常的行短一些），這也成立。除非該盒創建了一個新的塊格式化上下文（這種狀況下，該盒自身可能會由於浮動變窄）

2. 行內格式化上下文

   在行內格式化上下文中，盒是從包含塊的頂部開始一個挨一個水平放置的。這些盒之間的水平外邊距，邊框和內邊距都有效。盒可能會以不一樣的方式垂直對齊：以它們的底部或者頂部對齊，或者以它們裏面的文本的基線對齊。包含來自同一行的盒的矩形區域叫作行框

   行框的寬度由包含塊和浮動狀況決定，行框的高度由行高的計算小節給出的規則決定

   行框老是足夠高，可以容納它包含的全部盒。然而，它可能比它所包含的最高的盒還要高（例如，若是盒是以基線對齊的）。當盒B的高度小於它所在的行框的高度時，行框中B的垂直對齊方式由'vertical-align'屬性決定。當幾個行內級盒在水平方向上不能共存於一個行框時，它們會被分到兩個或多個垂直堆疊的（vertically-stacked） 行框裏。所以，段落就是個行框的垂直棧（vertical stack）。行框沒有垂直間隔地堆放（除非在其它地方有特別說明）而且它們不會重疊

3. 相對定位

   當一個盒根據常規流或者浮動擺放好後，它可能會相對於該位置移動，稱之爲相對定位。用這種方式偏移盒(B1)的位置不影響盒(B2)，遵循：給定B2位置時就當B1沒有偏移，而且B2在B1應用偏移以後沒有從新定位（re-positioned）。這代表相對定位可能會致使盒重疊。然而，若是相對定位致使有'overflow:auto'或'overflow:scroll'的盒溢出了的話，UA必須讓用戶可以訪問這部份內容（在其偏移位置），此時，滾動條的建立可能會影響佈局

4. 絕對定位

   絕對定位模型中，盒相對其包含塊明確偏移，它會從常規流中所有移除（不會影響後面的兄弟）。絕對定位的盒會爲常規流中的子級和絕對（不包括fixed）定位的後代創建一個新的包含塊。然而絕對定位的元素的內容不會沿着任何其它盒排列。它們可能會遮住其它盒的內容（或者它們自身被遮住），取決於重疊盒的堆疊層級（stack levels）

   fixed定位是絕對定位的子類（subcategory）。fixed定位的盒惟一的區別是，包含塊由視口創建。對於連續媒體，當文檔滾動時，fixed盒不會移動。在這一點上，它們和fixed背景圖像相似。對於分頁媒體，fixed定位的盒會在每一頁上重複（出現）。這在排版（placing）方面頗有用，例如，每一頁的底部都有一個簽名。fixed定位的盒比頁區（page area）大的部分會被裁剪。fixed定位盒在初始包含塊中不可見的部分將不會被打印