CSS核心概念 containing block

在 css2.1 中，很多框的定位和尺寸的計算，都取決於乙個矩形的邊界，這個矩形，被稱作是包含塊( containing block )。

以上**為例，div 和 table 都是包含塊。div 是 table 的包含塊，同時 table 又是 td 的包含塊，不是絕對的。

「乙個框的包含塊」，指的是「該框所存在的那個包含塊」，並不是它建造的包含塊。比如，上述**中，table 的包含塊，說的是 div 建造的包含塊，而不是 table 自身建造的包含塊。table 建造的包含塊，可以稱作 td 的包含塊。

【包含塊指的是建立該元素的符合條件的上級元素】

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

【自帶元素可以溢位包含塊】

包含塊的概念很重要，因為視覺化格式模型中很多的理論性知識都跟這個概念有關係，比如，寬度高度自動值的計算，浮動元素的定位，絕對定位元素的定位等等。

【包含塊會影響寬高自動值的計算，浮動，絕對定位的計算】

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

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

【父元素不一定就是包含塊，需要符合某些條件。】

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

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

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

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

1建立。

元素如果未宣告 'position' 特性，那麼就會採用 'position' 的預設值 "static"。

position:relative;">greed isgood 999999

包含塊關係表：

元素包含塊

table1

body

td1table1

div1

td1greed

div1

span 元素中包含的文字在 div1 中的位置可以看出，div1 建立的包含塊的區域是它的內容邊界，也就是內邊界。

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

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

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

1). 如果 'direction' 是 'ltr'，包含塊的頂、左邊是祖先元素生成的第乙個框的頂、左內邊距邊界(padding edges) ，右、下邊是祖先元素生成的最後乙個框的右、下內邊距邊界(padding edges)

示例**：

t
position:relative;">
這段文字從左向右排列，紅 xx 和 藍 xx 和黃 xx 都是絕對定位元素，它的包含塊是相對定位的span。 可以通過它們絕對定位的位置來判斷它們包含塊的邊緣。
position:absolute; color:red; top:0; left:0;">xx
position:absolute; color:yellow; top:20px; left:0;">xx
position:absolute; color:blue; bottom:0; right:0;">xx

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

示意圖：

行內元素內形成的包含塊，在各瀏覽器中各不相同，存在相容性問題。可以通過上面的例子可以證明這一點。藍色的 "xx" 的位置在各瀏覽器中都不一樣。

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

示例**：

text text text
position:relative;">
這段文字從左向右排列，紅 xx 和 藍 xx 和黃 xx 都是絕對定位元素，它的包含塊是相對定位的span。 可以通過它們絕對定位的位置來判斷它們包含塊的邊緣。
position:absolute; color:red; top:0; left:0;">xx
position:absolute; color:yellow; top:20px; left:0;">xx
position:absolute; color:blue; bottom:0; right:0;">xx

示意圖：

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

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

示例**：

direction:rtl;">
tposition:relative;">
這段文字從右向左排列，紅 xx 和 藍 xx 和黃 xx 都是絕對定位元素，它的包含塊是相對定位的span。可以通過它們絕對定位的位置來判斷它們……
position:absolute; color:red; top:0; left:0;">xx
position:absolute; color:yellow; top:20px; left:0;">xx
position:absolute; color:blue; bottom:0; right:0;">xx

示意圖：

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

示例**：

position:relative; width:200px; height:200px;">
position:absolute; left:0; top:0;">absolute element

以上**中，content 的父元素雖是 div1，但，按照標準它的包含塊應該是 container。

注：關於內容框，請參照： w3help - kb006: css 框模型( box module )

見 w3help - kb007: 視覺化格式模型( visual formatting model )簡介中的視口( viewport )

CSS核心概念 containing block

css盒模型 css核心概念

CSS核心概念再回顧

CSS核心的幾個概念

CSS核心概念 containing block

css盒模型 css核心概念

CSS核心概念再回顧

CSS核心的幾個概念

相關推薦