Containeing Block? (包含塊)

在CSS2.1 中，很多框的定位和尺寸的計算，都取決于一個矩形的邊界，這個矩形，被稱作是包含塊( containing block )。 一般來說，(元素)生成的框會扮演它子孫元素包含塊的角色；我們稱之為：一個(元素的)框為它的子孫節點建造了包含塊。包含塊是一個相對的概念。

以上代碼為例，DIV 和 TABLE 都是包含塊。DIV 是 TABLE 的包含塊，同時 TABLE 又是 TD 的包含塊，不是絕對的。

“一個框的包含塊”，指的是“該框所存在的那個包含塊”，并不是它建造的包含塊。比如，上述代碼中，TABLE 的包含塊，說的是 DIV 建造的包含塊，而不是 TABLE 自身建造的包含塊。TABLE 建造的包含塊，可以稱作 TD 的包含塊。

每個框關于它的包含塊都有一個位置，但是它不會被包含塊限制；它可以溢出(包含塊)。包含塊上可以通過設置 ‘overflow’ 特性達到處理溢出的子孫元素的目的。

包含塊的概念很重要，因為可視化格式模型中很多的理論性知識都跟這個概念有關系，比如，寬度高度自動值的計算，浮動元素的定位，絕對定位元素的定位等等。不了解包含塊，就掌握不好以它為基礎的后續理論。

包含塊判定及其范圍

由上面內容可知，元素框的定位和尺寸與其包含塊有關，而元素會為它的子孫元素創建包含塊。

那么，是不是說，元素的包含塊就是它的父元素呢？包含塊的區域是不是父元素的內容區域呢？ 答案是否定的。此節中，將給出各類元素包含塊的判斷以及包含塊的區域范圍。 如果不存在符合判斷標準的祖先元素，那么元素的包含塊就是初始包含塊。

包含塊判定總流程圖如下：

根元素

根元素，就是處于文檔樹最頂端的元素，它沒有父節點。

根元素存在的包含塊，被叫做初始包含塊 (initial containing block)。具體，跟用戶端有關。

在 (X)HTML 中，根元素是 html 元 素（盡管有的瀏覽器會不正確地使用 body 元素）。

而初始包含塊的 direction 屬性與根元素相同。

靜態定位元素和相對定位元素

如果該元素的定位（position）為 “relative” （相對定位）或者 “static”（靜態定位），它的包含塊由它最近的塊級、單元格（table cell）或者行內塊（inline-block）祖先元素的 內容框1創建。

元素如果未聲明 ‘position’ 特性，那么就會采用 ‘position’ 的默認值 “static”。

de style="background-color: rgb(255, 255, 153);" >greed isgood 999999de>

包含塊關系表：

元素 包含塊

table1 body

td1 table1

p1 td1

greed p1

SPAN 元素中包含的文本在 p1 中的位置可以看出，p1 創建的包含塊的區域是它的內容邊界，也就是內邊界。

固定定位元素

如果元素是固定定位 (“position:fixed”) 元素，那么它的包含塊是當前可視窗口2。

絕對定位元素

總的來說，絕對定位（”position: absolute”）元素的包含塊由離它最近的 ‘position’ 屬性為 ‘absolute’、’relative’ 或者 ‘fixed’ 的祖先元素創建。

如果其祖先元素是行內元素，則包含塊取決于其祖先元素的 ‘direction’ 特性

de>T?這段文字從左向右排列，紅 XX 和 藍 XX 和黃 XX 都是絕對定位元素，它的包含塊是相對定位的SPAN。 可以通過它們絕對定位的位置來判斷它們包含塊的邊緣。XXXXXXde>

以上代碼中，文字采取默認從左到右的方式排列。紅 XX 和 藍 XX 和黃 XX 都是絕對定位元素，它的包含塊是相對定位的 SPAN。 它們定位需要參照包含塊，按照標準來說，它們包含塊的左頂邊是 SPAN 形成的第一個框（即第一行的灰色部分）的頂、左內邊距邊，包含塊的右、下邊是 SPAN 生成的最后一個框（最后一行灰色的部分）的右、下內邊距邊界。

行內元素內形成的包含塊，在各瀏覽器中各不相同，存在兼容性問題?？梢酝ㄟ^上面的例子可以證明這一點。藍色的 “XX” 的位置在各瀏覽器中都不一樣。

包含塊的寬度可能是負的。

示例代碼：

de>TEXT TEXT TEXT?這段文字從左向右排列，紅 XX 和 藍 XX 和黃 XX 都是絕對定位元素，它的包含塊是相對定位的SPAN。 可以通過它們絕對定位的位置來判斷它們包含塊的邊緣。XXXXXXde>

以上的邊界無法圍成一個區域，在這種情況下，包含塊的寬度是負的。

2). 如果 ‘direction’ 是 ‘rtl’，包含塊的頂、右邊是祖先元素生成的第一個框的頂、右內邊距邊界 (padding edges) ，左、下邊是祖先元素生成的最后一個框的左、下內邊距邊界 (padding edges)

示例代碼：

de>T?這段文字從右向左排列，紅 XX 和 藍 XX 和黃 XX 都是絕對定位元素，它的包含塊是相對定位的SPAN?？梢酝ㄟ^它們絕對定位的位置來判斷它們……XXXXXXde>

其他情況下，如果祖先元素不是行內元素，那么包含塊的區域應該是祖先元素的內邊距邊界