容器块

一般来说，盒子定位和大小都是参考一个矩形边缘来计算的，而这个矩形就是该元素的容器块（containing block），其原文定义如下：

“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. ”

一个元素的容器块大概定义如下：

• 首先根元素就是一个初始容器块（initial containing block）；
• 其次，如果元素的 position 是 ‘relative’ 或 ‘static’，其容器块就是由离它最近的块容器父级元素或创建了一个格式上下文的父级元素生成；
• 如果元素设置了position: fixed;，它的容器块一般由视窗生成；
• 如果元素设置了position: absolute;，则它的容器块就是由设置了position 为 relative，absolute 或 fixed 的最近父级元素生成，如果父级元素都没有设置，则由根元素生成；
• transform 属性值为非 none 的元素会生成一个容器块，其 fixed 的子元素会以此定位。

同样，这也很难理解，不如来个简单的例子。假设你有个书房，如下图所示：

• 首先你的房子是一个初始的容器块（相对于根元素），书房的定位和大小是根据你房子总大小来计算的。
• 而书桌和墙上书柜的位置是基于书房来确定的，那么书房就为书桌和书柜生成了一个容器块。
• 最后电脑和杯子又是放在书桌上的，那么书桌又为电脑和杯子生成了一个个容器块。

简单来说一个容器块，会直接影响到其子元素的定位或大小。

关于容器块的规范定义可参考：Definition of “containing block”