css 包含块(Containing Box)

1. 什么是CSS包含块（Containing Block）:包含块（Containing Block）是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形(包含块就是一个矩形)，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。切记的就是包含块和定位属性position并不是绝对有关系的，两者只是一个归属关系。

2. 包含块简单说就是定位参考框，或者定位坐标参考系，元素一旦定义了定位显示（相对、绝对、固定）都具有包含块性质，它所包含的定位元素都将以该包含块为坐标系进行定位和调整。

3. 一个元素盒子的位置和大小有时是通过相对于一个特定的长方形来计算的，这个长方形就被称之为元素的 containing block。

4. 一个元素的 containing block 按以下方式定义：
(1)用户代理（比如浏览器）选择根元素作为 containing block（称之为初始 containing block：IBC）。

★ 在(X)HTML中，根元素是html元素（尽管有的浏览器会不正确地使用body元素）。

★ 而初始包含块的direction属性与根元素相同。(direction属性指定了块的基本书写方向，它还规定了表格列布局的方向、水平溢出的方向等。)

★ 对于连续媒体（如电脑浏览器），初始包含块是视口大小的一个矩形。
(2)对于其它元素，如果该元素的定位（position）为“relative（相对）”或者“static（静态）”，包含框 由最近的块级祖先元素盒子，或者是单元格（table cell）或者是行内块(inline-block)祖先元素的内容边界组成。

(3)如果元素有属性 'position:fixed'，containing block 由视口建立。
(4)如果元素有属性 'position:absolute'，containing block 由最近的 position 不是 static 的祖先建立，按下面的步骤：
a) 如果祖先是块级元素，containing block 由祖先的 padding edge 形成。
b) 如果祖先是内联元素，containing block 取决于祖先的 direction 属性。
(i)如果 direction 是 ltr（左到右），祖先产生的第一个盒子的上、左内容边界是 containing block 的上方和左方，祖先的最后一个盒子的下、右内容边界是 containing block 的下方和右方。
(ii)如果 direction 是 rtl（右到左），祖先产生的第一个盒子的上、右内容边界是 containing block 的上方和右方，祖先的最后一个盒子的下、左内容边界是 containing block 的下方和左方。

c) 如果没有祖先，根元素盒子的内容边界确定为 containing block。

PS: 什么是视口：浏览器窗口一般由3部分组成，分别是工具栏，视口和状态栏，如下图所示，连续媒介的用户端（例如浏览器），通常提供给用户一个视口（viewport,屏幕上的一个窗口或浏览区域），用户通过它来浏览文档，当视口尺寸改变时（例如调整浏览器的窗口大小），用户端可能会改变文档的布局；其次，如果视口比文档的大小要小，用户端则往往会提供滚动机制（例如浏览器的滚动条）；finally, 对于一个渲染区域而言，最多只能有一个视口，不过用户端可以对多个渲染区域加以渲染（对同一个文档提供不同的视口）。

2.