Containeing Block? (包含塊)

在CSS2.1 中瑰抵，很多框的定位和尺寸的計(jì)算，都取決于一個矩形的邊界攒盈，這個矩形搁廓，被稱作是包含塊( containing block )。 一般來說诵冒，(元素)生成的框會扮演它子孫元素包含塊的角色凯肋；我們稱之為：一個(元素的)框?yàn)樗淖訉O節(jié)點(diǎn)建造了包含塊。包含塊是一個相對的概念汽馋。

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

“一個框的包含塊”铁蹈，指的是“該框所存在的那個包含塊”宽闲，并不是它建造的包含塊。比如握牧，上述代碼中容诬，TABLE 的包含塊，說的是 DIV 建造的包含塊沿腰，而不是 TABLE 自身建造的包含塊览徒。TABLE 建造的包含塊，可以稱作 TD 的包含塊颂龙。

每個框關(guān)于它的包含塊都有一個位置习蓬，但是它不會被包含塊限制纽什；它可以溢出(包含塊)。包含塊上可以通過設(shè)置 ‘overflow’ 特性達(dá)到處理溢出的子孫元素的目的躲叼。

包含塊的概念很重要芦缰，因?yàn)榭梢暬袷侥Ｐ椭泻芏嗟睦碚撔灾R都跟這個概念有關(guān)系，比如枫慷，寬度高度自動值的計(jì)算让蕾，浮動元素的定位，絕對定位元素的定位等等流礁。不了解包含塊涕俗，就掌握不好以它為基礎(chǔ)的后續(xù)理論。

包含塊判定及其范圍

由上面內(nèi)容可知神帅，元素框的定位和尺寸與其包含塊有關(guān)再姑，而元素會為它的子孫元素創(chuàng)建包含塊。

那么找御，是不是說元镀，元素的包含塊就是它的父元素呢？包含塊的區(qū)域是不是父元素的內(nèi)容區(qū)域呢霎桅？ 答案是否定的栖疑。此節(jié)中，將給出各類元素包含塊的判斷以及包含塊的區(qū)域范圍滔驶。 如果不存在符合判斷標(biāo)準(zhǔn)的祖先元素遇革，那么元素的包含塊就是初始包含塊。

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

根元素

根元素揭糕，就是處于文檔樹最頂端的元素萝快，它沒有父節(jié)點(diǎn)。

根元素存在的包含塊著角，被叫做初始包含塊 (initial containing block)揪漩。具體，跟用戶端有關(guān)吏口。

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

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

靜態(tài)定位元素和相對定位元素

如果該元素的定位（position）為 “relative” （相對定位）或者 “static”（靜態(tài)定位）蝠筑，它的包含塊由它最近的塊級积锅、單元格（table cell）或者行內(nèi)塊（inline-block）祖先元素的 內(nèi)容框1創(chuàng)建昼扛。

元素如果未聲明 ‘position’ 特性撬讽，那么就會采用 ‘position’ 的默認(rèn)值 “static”族展。

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

包含塊關(guān)系表：

元素 包含塊

table1 body

td1 table1

p1 td1

greed p1

SPAN 元素中包含的文本在 p1 中的位置可以看出，p1 創(chuàng)建的包含塊的區(qū)域是它的內(nèi)容邊界深滚，也就是內(nèi)邊界奕谭。

固定定位元素

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

絕對定位元素

總的來說血柳，絕對定位（”position: absolute”）元素的包含塊由離它最近的 ‘position’ 屬性為 ‘a(chǎn)bsolute’、’relative’ 或者 ‘fixed’ 的祖先元素創(chuàng)建生兆。

如果其祖先元素是行內(nèi)元素难捌，則包含塊取決于其祖先元素的 ‘direction’ 特性

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

以上代碼中合蔽，文字采取默認(rèn)從左到右的方式排列击敌。紅 XX 和 藍(lán) XX 和黃 XX 都是絕對定位元素，它的包含塊是相對定位的 SPAN拴事。 它們定位需要參照包含塊沃斤，按照標(biāo)準(zhǔn)來說，它們包含塊的左頂邊是 SPAN 形成的第一個框（即第一行的灰色部分）的頂刃宵、左內(nèi)邊距邊衡瓶，包含塊的右、下邊是 SPAN 生成的最后一個框（最后一行灰色的部分）的右牲证、下內(nèi)邊距邊界哮针。

行內(nèi)元素內(nèi)形成的包含塊，在各瀏覽器中各不相同坦袍，存在兼容性問題十厢。可以通過上面的例子可以證明這一點(diǎn)键闺。藍(lán)色的 “XX” 的位置在各瀏覽器中都不一樣寿烟。

包含塊的寬度可能是負(fù)的。

示例代碼：

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

以上的邊界無法圍成一個區(qū)域徘六，在這種情況下，包含塊的寬度是負(fù)的榴都。

2). 如果 ‘direction’ 是 ‘rtl’待锈，包含塊的頂、右邊是祖先元素生成的第一個框的頂嘴高、右內(nèi)邊距邊界 (padding edges) 竿音，左和屎、下邊是祖先元素生成的最后一個框的左、下內(nèi)邊距邊界 (padding edges)

示例代碼：

de>T?這段文字從右向左排列春瞬，紅 XX 和 藍(lán) XX 和黃 XX 都是絕對定位元素柴信，它的包含塊是相對定位的SPAN】砥可以通過它們絕對定位的位置來判斷它們……XXXXXXde>

其他情況下随常，如果祖先元素不是行內(nèi)元素，那么包含塊的區(qū)域應(yīng)該是祖先元素的內(nèi)邊距邊界