CSS包含块(containing block)

包含块(containing block)

什么是包含块?

正常情况下,包含块就相当于一个相对参考系,某元素的包含块就是最高包裹当前元素的块级元素或者是离它最近的祖先元素(大多数是父元素)(除static之外)

• 初始包含块是一个视窗大小的矩阵,即HTML的父级document,它是根元素HTML的包含块;而非根元素的包含块.详细介绍如下:

  • 如果position值是relative或static,包含块由最近的块级框,表单元格或行内祖先框的内容边界构成

  • 如果position值是absolute,包含块设置为最近的position值不是static的祖先元素(可以是任意类型),具体介绍如下:

    • 如果这个祖先块是块级元素,则包含块为该元素的内边距边界.即是由边框界定的区域

    • 如果这个祖先元素是行内元素,则包含块设置为该元素的内容边界

    • 如果该元素没有祖先,则元素的包含块定义为初始包含块,即document

• 注意: 由于元素可以设置定位到其包含块的外面.这与浮动元素使用外边距浮动到其父元素内容区的外面很相似,所以这里包含块实际上应该是定位上下文,或者定位父级