摘要：規范里的一些事前言以下內容總結于規范，一盒子模型以上圖形說的是盒子模型中的邊界。，，和屬性失效盒的位置是根據常規流計算的被稱為常規流中的位置，然后盒相對于其常規位置偏移。

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

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

樣式

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

合并外邊距

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

根元素盒的margin不合并；

如果一個帶有間隙（clearance 指clear屬性導致元素位置移動形成的間隙）的元素的上外邊距與下外邊距相鄰，它的外邊距會和緊挨著的兄弟（元素）的相鄰外邊距合并，但合并后不會再和父級塊的下外邊距合并；

水平margin不會合并；

兩個margin是相鄰的，當且僅當：

都屬于流內（in-flow）塊級盒，處于同一個塊格式化上下文;

沒有行框（line box），空隙，內邊距和邊框把它們隔開;

都屬于垂直相鄰框邊界（vertically-adjacent box edges），即形成下列某一對：
盒的上邊距與其第一個流內（in-flow）孩子的上邊距
盒的下邊距與其下一個流內緊挨著的兄弟的上邊距
最后一個流內孩子的下邊距與其height計算值為"auto"的父元素的下邊距
盒的上邊距和下邊距，要求該盒沒有建立新的塊格式化上下文，并且"min-height"計算值為0，"height"計算值為0或"auto"，還沒有流內孩子折疊外邊距也能與另一個外邊距相鄰，只要其外邊距的任意一部分與那個外邊距相鄰就算

合并后的結果：
當兩個或者更多的margin合并時，產生的margin寬度為被合并的外邊距寬度中的最大值。至于負margin，就從正相鄰margin的最大值中減去負相鄰margin的絕對值的最大值。如果沒有正margin，就用0減去相鄰margin的絕對值的最大值。如果該元素的外邊距與其父元素的上外邊距合并了，盒的上邊框邊界被定義為與其父元素的相同否則，要么該元素的父元素沒參與外邊距合并，要么只涉及其父元素的下外邊距。該元素上邊框邊界的位置與元素下邊框非0時的位置相同。

內邊距padding

內邊距的屬性和外邊距的屬性類似， 有一點不同的是，內邊距padding不能為負。

邊框border

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

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

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

包含塊

CSS 2.1中，很多盒的位置和大小是根據被稱為包含塊的矩形框的邊界計算的。一般把生成的盒作為后代盒的包含塊，我們說一個盒為其后代“建立”了包含塊。“一個盒的包含塊”表示“盒所在的包含塊”，而不是它生成的（包含塊）每個盒都根據其包含塊確定了一個位置，但它不受該包含塊的限制，可能會溢出

塊級元素與塊盒

行級元素與行內盒

使用display屬性可以定義block、inline-block、inline、list-item、none等樣式。以下分別是這幾種屬性的作用：

該值會讓元素生成一個塊盒

該值會讓元素生成一個行內級塊容器（inline-level block container）。一個inline-block的內部會被格式化成一個塊盒，而該元素本身會被格式化成一個原子行內級盒

該值會讓元素生成一個或多個行內盒

該值會讓元素（例如，HTML中的LI）生成一個主塊盒（principal block box）和一個標記盒（marker box）。關于列表及列表格式化示例的更多信息請查看列表章節

該值會讓元素不在格式化結構（formatting structure）中出現（即在視覺媒體中，元素不會生成盒也不會影響布局）。后代元素也不會生成任何盒，該元素及其內容會從格式化結構中全部移除。這種行為不能通過給后代設置"display"屬性來重寫

定位方案

常規流 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"模型一樣，盒的外邊距不會與任何其它外邊距合并。

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

塊格式化上下文

浮動，絕對定位的元素，非塊盒的塊容器（例如inline-blocks，table-cells和table-captions），以及’overflow’不為’visible’的塊盒（當該值已被傳播到視口時除外（except when that value has been propagated to the viewport））會為其內容建立新的塊格式化上下文.
在一個塊格式化上下文中，盒在垂直方向一個接一個地放置，從包含塊的頂部開始。兩個兄弟盒之間的垂直距離由"margin"屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的垂直外邊距會合并.
在一個塊格式化上下文中，每個盒的左外邊界（left outer edge）挨著包含塊的左外邊界（對于從右向左的格式化，右外邊界挨著）。即使存在浮動（盡管一個盒的行框可能會因為浮動而收縮 譯注：環繞浮動元素放置的行框比正常的行短一些），這也成立。除非該盒建立了一個新的塊格式化上下文（這種情況下，該盒自身可能會因為浮動變窄）

行內格式化上下文

在行內格式化上下文中，盒是從包含塊的頂部開始一個挨一個水平放置的。這些盒之間的水平外邊距，邊框和內邊距都有效。盒可能會以不同的方式垂直對齊：以它們的底部或者頂部對齊，或者以它們里面的文本的基線對齊。包含來自同一行的盒的矩形區域叫做行框    
行框的寬度由包含塊和浮動情況決定，行框的高度由行高的計算小節給出的規則決定
行框總是足夠高，能夠容納它包含的所有盒。然而，它可能比它所包含的最高的盒還要高（例如，如果盒是以基線對齊的）。當盒B的高度小于它所在的行框的高度時，行框中B的垂直對齊方式由"vertical-align"屬性決定。當幾個行內級盒在水平方向上不能共存于一個行框時，它們會被分到兩個或多個垂直堆疊的（vertically-stacked） 行框里。因此，段落就是個行框的垂直棧（vertical stack）。行框沒有垂直間隔地堆放（除非在其它地方有特別說明）并且它們不會重疊

相對定位

當一個盒根據常規流或者浮動擺放好后，它可能會相對于該位置移動，稱之為相對定位。用這種方式偏移盒(B1)的位置不影響盒(B2)，遵循：給定B2位置時就當B1沒有偏移，并且B2在B1應用偏移之后沒有重新定位（re-positioned）。這表明相對定位可能會導致盒重疊。然而，如果相對定位導致有"overflow:auto"或"overflow:scroll"的盒溢出了的話，UA必須讓用戶能夠訪問這部分內容（在其偏移位置），此時，滾動條的創建可能會影響布局

絕對定位

絕對定位模型中，盒相對其包含塊明確偏移，它會從常規流中全部移除（不會影響后面的兄弟）。絕對定位的盒會為常規流中的子級和絕對（不包括fixed）定位的后代建立一個新的包含塊。然而絕對定位的元素的內容不會沿著任何其它盒排列。它們可能會遮住其它盒的內容（或者它們自身被遮住），取決于重疊盒的堆疊層級（stack levels）
fixed定位是絕對定位的子類（subcategory）。fixed定位的盒唯一的區別是，包含塊由視口建立。對于連續媒體，當文檔滾動時，fixed盒不會移動。在這一點上，它們和fixed背景圖像類似。對于分頁媒體，fixed定位的盒會在每一頁上重復（出現）。這在排版（placing）方面很有用，例如，每一頁的底部都有一個簽名。fixed定位的盒比頁區（page area）大的部分會被裁剪。fixed定位盒在初始包含塊中不可見的部分將不會被打印