1，寫在前面的話

CSS目前還不被認可是一門真正的編程語言，雖然現(xiàn)在已經(jīng)有像less、saas、stylus這樣的預處理器或者叫預處理框架，使CSS更具動態(tài)性，擁有諸如變量、繼承、運算、函數(shù)等編程特性，但是我們不可忽視CSS在前端開發(fā)中的地位，特別是在互聯(lián)網(wǎng)（移動互聯(lián)網(wǎng)）時代，前端作為直面用戶的“門戶”，對視覺與交互要求越來越高，CSS就如是“門戶”的裝潢有者不可替代的地位，在發(fā)揮著越來越重要的作用。

正是因為CSS的聲明式特點與編程上的特殊性，CSS上手很容易，但是精深卻很難，我們需要系統(tǒng)性地學習并應(yīng)用它。我們從最基礎(chǔ)，最不容易懂而且很容易被忽視的地方開始，從規(guī)范或者權(quán)威解讀里出發(fā)，一步一步深入CSS的世界。

2，什么是包含塊

首先，我們來看下W3C CSS規(guī)范中對包含塊的定義:

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The 'direction' property of the initial containing block is the same as for the root element.

For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.

If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media.

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:

In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.

Otherwise, the containing block is formed by the padding edge of the ancestor.

If there is no such ancestor, the containing block is the initial containing block.

一大串英文，看起來容易頭暈，沒關(guān)系我們來翻譯并拆解下:

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element.

一個元素框（盒子，有可能有多個，比如行盒）的大小和位置的計算有時是和一個特定的矩形框相關(guān)的，這個矩形框就叫該元素的包含塊

上面這句話就給包含塊下了個定義，其中有幾個點我們需要關(guān)注下

（1）“特定的矩形框”：包含塊的具象特征

（2）“有時”：這意味者并不是所有元素都有包含塊。

理清了定義后，我們來看看包含塊具體的規(guī)則與詳細解釋

The containing block of an element is defined as follows:

元素的包含塊具體定義如下：

The containing block in which theroot elementlives is a rectangle called theinitial containing block. For continuous media, it has the dimensions of theviewportand is anchored at the canvas origin; it is thepage areafor paged media. The 'direction' property of the initial containing block is the same as for the root element.

根元素所在的包含塊是一個稱為初始包含塊的矩形。對于連續(xù)媒體，它具有視口的尺寸，并固定在畫布原點；而對于分頁媒體，則是一個頁面的區(qū)域。初始包含塊的“ direction”（排布方向：ltr or rtl）屬性與根元素相同。 --- 至此我們引出了初始包含塊。

For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearestblock containerancestor box.

對于其他元素，如果位置（定位）屬性值為static/relative，則它的 包含塊是由它最近的祖先元素的塊狀盒子（display為 block、table cell(類似 <td> 和 <th>) 或者 inline-block ）的內(nèi)容區(qū)域決定的。

If the element has 'position: fixed', the containing block is established by theviewportin the case of continuous media or the page area in the case of paged media.

如果元素具有“位置：固定”，則在連續(xù)媒體的情況下由視口建立包含塊，在分頁媒體的情況下由頁面區(qū)域建立包含塊。

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a'position'of 'absolute', 'relative' or 'fixed', in the following way:

In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.

如果元素具有“位置：絕對”，則包含塊由最接近的祖先（ 位置屬性為“絕對”或“相對”或“固定”）建立，具體細則如下： 在祖先是內(nèi)聯(lián)元素的情況下，包含塊是為該元素生成的第一個和最后一個內(nèi)聯(lián)框的填充框周圍的 內(nèi)邊距區(qū)域框。在CSS 2.1中，如果將inline元素分成多行，則包含塊未定義。

Otherwise, the containing block is formed by thepadding edgeof the ancestor.

否則，包含塊由祖先的填充內(nèi)邊距區(qū)域形成。

If there is no such ancestor, the containing block is the initial containing block.

如果沒有這樣的祖先，則包含塊為初始包含塊。

上面都是文字描述，有點不夠形象，我們引用個導圖來總結(jié)下：

3，包含塊的作用和意義

包含塊我們平時“看不到”、“摸不著”，那理解它有什么意義呢？

意義大著呢，因為山就在那里！

包含塊（Containing Block）是視覺格式化模型（該文集里有相應(yīng)的解讀）的一個重要概念，它與框模型（盒模型）類似，也可以理解為一個矩形，而這個矩形的作用是為它里面包含的元素提供一個參考，元素的尺寸和位置的計算往往是由該元素所在的包含塊決定的。

如果深入了解包含塊等重要基礎(chǔ)知識，則在日常的開發(fā)比如頁面布局，還有問題解決時，就更有底氣，更能夠找到問題點，對開發(fā)的價值也是有重大意義的。