css包含塊containing block

《css權威指南》P167：

Every element is laid out with respect to its containing block; in a very real way, the containing block is the "layout context" for an element. CSS2.1 defines a series of rules for determining an element's containing block. I'll cover only those rules that pertain to the concepts covered in this chapter and leave the rest for future chapters.

每個元素都相對于其包含塊擺放，可以這麼說，包含塊就是一個元素的“布局上下文”。css2.1定義了一系列規則來确定元素的包含塊，這裡介紹的隻是其中部分規則。

For an element in the normal, Western-style flow of text, the containing block is formed by the content edge of the nearest block-level, table cell, or inline-block ancestor box. Consider the following markup:

對于正常的西方語言文本流中的一個元素，包含塊由最近的塊級祖先框，表單元格或行内塊inline-block祖先框的内容邊界（content edge）構成。

In this very simple markup, the containing block for the p element is the div element, as that is the closest ancestor element that is block-level, a table cell, or inline-block (in this case, it's a block box). Similarly, the div's containing block is the body. Thus, the layout of the p is dependent on the layout of the div, which is in turn dependent on the layout of the body.

p元素的包含塊是div，因為作為塊級元素、表單元格或行内塊元素，這是最近的祖先元素（本例中是一個塊元素框）。類似第，div的包含塊是body。是以，p的布局依賴于div的布局，div的布局則依賴body布局。

You don't need to worry about inline elements since the way they are laid out doesn't depend directly on containing blocks. We'll talk about them later in the chapter.

不必擔心inline element，因為他們的擺放方式并不直接依賴于包含塊。

-------------------------

w3c定義：

http://www.w3.org/TR/CSS2/visudet.html#containing-block-details

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.

In paged media, an absolutely positioned element is positioned relative to its containing block ignoring any page breaks (as if the document were continuous). The element may subsequently be broken over several pages.

For absolutely positioned content that resolves to a position on a page other than the page being laid out (the current page), or resolves to a position on the current page which has already been rendered for printing, printers may place the content

on another location on the current page,

on a subsequent page, or

may omit it.

Note that a block-level element that is split over several pages may have a different width on each page and that there may be device-specific limits.

With no positioning, the containing blocks (C.B.) in the following document:

are established as follows:

<col>

For box generated by

C.B. is established by

html

initial C.B. (UA-dependent)

body

div1

p1

p2

em1

strong1

If we position "div1":

its containing block is no longer "body"; it becomes the initial containing block (since there are no other positioned ancestor boxes). 确實，我們定義div1為absolute，包含塊不再是body。。

If we position "em1" as well:

the table of containing blocks becomes:

initial C.B.

By positioning "em1", its containing block becomes the nearest positioned ancestor box (i.e., that generated by "div1").

完。

在http://www.w3help.org/zh-cn/kb/008/ 也詳細說了這個概念；

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

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

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

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

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

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

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

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

元素如果未聲明 'position' 特性，那麼就會采用 'position' 的預設值 "static"。

包含塊關系表：

元素

包含塊

table1

td1

greed

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

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

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

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