containing block

原理

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

1. 用户代理（比如浏览器）选择根元素作为 containing block（称之为初始 containing block）。
2. 对于其它元素，除非元素使用的是绝对位置，containing block 由最近的块级祖先元素盒子的内容边界组成。
3. 如果元素有属性 'position:fixed'，containing block 由视口建立。
4. 如果元素有属性 'position:absolute'，containing block 由最近的 position 不是 static 的祖先建立，按下面的步骤：
   1. 如果祖先是块级元素，containing block 由祖先的 padding edge 形成。
   2. 如果祖先是内联元素，containing block 取决于祖先的 direction 属性。
      1. 如果 direction 是 ltr（左到右），祖先产生的第一个盒子的上、左内容边界是 containing block 的上方和左方，祖先的最后一个盒子的下、右内容边界是 containing block 的下方和右方。
      2. 如果 direction 是 rtl（右到左），祖先产生的第一个盒子的上、右内容边界是 containing block 的上方和右方，祖先的最后一个盒子的下、左内容边界是 containing block 的下方和左方。

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

例子

没有指定 position，上方的代码的 containing blocks (C.B.) 确定方式如下：

如果我们设置 div1 的 position：

div1 的 containing block 就不再是 body，它变成了初始 containing block（因为这里还没有具有 position 的祖先盒子）。

如果我们按如下方式放置 em1：

containing blocks 变成如下：

通过放置 em1，它的 containing block 变成了最近的具有 position 的祖先盒子（也就是：div1）。

名词解释

根元素－源文件中，每一个元素都有一个父元素，只有一个例外，它就是根元素。

视口－通过解析文档，连续媒体（比如屏幕就是连续媒体，而打印机则是基于页的媒体）给用户产生一个视口（一个窗口或其它在屏幕上显示的区域）。

padding edge－请参见下图：

相关阅读

• position 的 static、relative、absolute、fixed、inherit