包含块(containing block)就是元素用来计算和定位的一个框。 (1)根元素(很多场景下可以看成是<html>)被称为“初始包含块”,其尺寸等同于浏览器可视窗口的大小。 (2)对于其他元素,如果该元素的position是relative或者static,则“包含块”由其最近的块容器祖先盒的content box 边界形成。 (3)如果元素position:fixed,则“包含块”是“初始包含块”。 (4)如果元素position:absolute,则“包含块”由最近的position不为static的祖先元素建立,具体方式如下: 如果该祖先元素是纯inline元素,则规则略复杂: •假设给内联元素的前后各生成一个宽度为0的内联盒子(inline box),则这两个内联盒子的padding box外面的包 围盒就是内联元素的“包含块”; •如果该内联元素被跨行分割了,那么“包含块”是未定义的,也就是CSS2.1规范并没有明确定义,浏览器自行发挥 否则,“包含块”由该祖先的padding box边界形成。 如果没有符合条件的祖先元素,则“包含块”是“初始包含块”。
本文作者:前端小毛
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!