你不一定知道的css知识——包含块

包含块（containing block)

这里是css2.1规范10.1章节对包含块的解释

包含块的定义（我不讨论分页媒体）

元素盒子的位置和大小有时候是根据特定矩形计算的，这个特定矩形被称作元素的包含块。元素的包含块定义如下：

1.根元素所在的包含块被称之为初始包含块，也是一个矩形。

2.对于其他元素，如果这个元素的定位是‘relative'或'static',那么包含块由它最近的块容器祖先盒子的内容边形成。
注意：块容器还包括不可替换的内联块和不可替换的表格单元。

3.如果元素的定位是‘fixed’,包含块是由视口建立的。

4.如果元素的定位是‘absolute',其包含块就是最近的已经定位的祖先元素建立（已经定位包括‘absolute','relative'或'fixed'定位）。

如果该祖先元素是一个行内元素，包含块就是环绕着为该元素生成的第一个和最后一个内联盒的padding box的边界框。在css2.1中，如果该内联元素被跨行分割了，那么包含块是未定义的。

具体的说法是：

b) 如果祖先是内联元素，包含块取决于祖先的 direction 属性。

(i)如果 direction 是 ltr（左到右），包含块的顶、右边是祖先元素生成的第一个框的顶、左内边距边界 (padding edges) ，左、下边是祖先元素生成的最后一个框的右、下内边距边界 (padding edges)。

(ii)如果 direction 是 rtl（右到左），包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界 (padding edges) ，左、下边是祖先元素生成的最后一个框的左、下内边距边界 (padding edges)。

如果祖先是块级元素，那么包含块由祖先的 padding边形成。

如果没有这样的祖先，包含块就是初始包含块。

作者：在下贼溜
链接：https://www.jianshu.com/p/ac7771ea1e9e