Skip to content
登录后刷题更便捷

什么是包含块,对于包含块的理解?

难度:

包含块(containing block)就是元素用来计算和定位的一个框。

  1. 根元素(很多场景下可以看成是<html>)被称为“初始包含块”,其尺寸等同于浏览器可视窗口的大小。

  2. 对于其他元素,如果该元素的 positionrelative 或者 static,则“包含块”由其最近的块容器祖先盒的 content box 边界形成。

  3. 如果元素 position:fixed,则“包含块”是“初始包含块”。

  4. 如果元素 position:absolute,则“包含块”由最近的 position 不为 static 的祖先元素建立,具体方式如下:

  5. 如果该祖先元素是纯 inline 元素,则规则略复杂:

    • 假设给内联元素的前后各生成一个宽度为 0 的内联盒子(inline box),则这两个内联盒子的 padding box 外面的包围盒就是内联元素的“包含块”;
    • 如果该内联元素被跨行分割了,那么“包含块”是未定义的,也就是 CSS2.1 规范并没有明确定义,浏览器自行发挥否则,“包含块”由该祖先的 padding box 边界形成。

    如果没有符合条件的祖先元素,则“包含块”是“初始包含块”。

内容仅供参考,难免有不恰当的地方,如果有问题欢迎及时反馈
部分内容来自网络,如果不慎侵犯您的权益,请联系我们,以便及时删除侵权内容