我
什么是包含块,对于包含块的理解?
难度:
包含块(containing block)就是元素用来计算和定位的一个框。
根元素(很多场景下可以看成是
<html>
)被称为“初始包含块”,其尺寸等同于浏览器可视窗口的大小。对于其他元素,如果该元素的
position
是relative
或者static
,则“包含块”由其最近的块容器祖先盒的 content box 边界形成。如果元素
position:fixed
,则“包含块”是“初始包含块”。如果元素
position:absolute
,则“包含块”由最近的position
不为static
的祖先元素建立,具体方式如下:如果该祖先元素是纯
inline
元素,则规则略复杂:- 假设给内联元素的前后各生成一个宽度为 0 的内联盒子(inline box),则这两个内联盒子的 padding box 外面的包围盒就是内联元素的“包含块”;
- 如果该内联元素被跨行分割了,那么“包含块”是未定义的,也就是 CSS2.1 规范并没有明确定义,浏览器自行发挥否则,“包含块”由该祖先的 padding box 边界形成。
如果没有符合条件的祖先元素,则“包含块”是“初始包含块”。