包含块

包含块是Css可视化模型一个重要的概念。很多理论性知识都跟包含块有关，比如，宽度高度自动值的计算，浮动元素的定位，绝对定位元素的定位等等。

一般来说，(元素)生成的框会扮演它子孙元素包含块的角色；我们称之为：一个(元素的)框为它的子孙节点建造了包含块。

包含块判定及其范围

根元素

文档最顶端的元素，它没有父元素。它所在的包含块是被称为“初始包含块”(initial containing block)。

static和relative定位元素

如果元素的position为relative或者static，那么它的包含块由最近的块级、单元格、行内块祖先元素的内容框创建。

fixed定位元素

如果元素position：fixed，那么它的包含块是当前可视窗口。

absolute定位元素

祖先元素是块级元素：绝对定位的元素的包含块是由它最近的position为absolute,relative,fixed的祖先元素创建。

祖先元素是行内元素：包含块取决于祖先元素的"direction"特性。

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

示例代码:

<p style="border:1px solid red; width:200px; padding:20px;">
T
<span style="background-color:#C0C0C0; position:relative;">
        这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。
        <em style="position:absolute; color:red; top:0; left:0;">XX</em>
        <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>
        <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>
</span>
</p>

示意图:

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

示例代码：

<p style="border:1px solid red; width:200px; padding:20px; direction:rtl;">
T
<span style="background-color:#C0C0C0; position:relative;">
     这段文字从右向左排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。可以通过它们绝对定位的位置来判断它们……
    <em style="position:absolute; color:red; top:0; left:0;">XX</em>
    <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>
    <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>
</span>
</p>

示意图:

其他情况下，如果祖先元素不是行内元素，那么包含块的区域应该是祖先元素的内边距边界

示例代码:

<div id="container" style="padding:50px; background-color:#c0c0c0; position:relative; width:200px; height:200px;">
<div id="div1" style="width:100%; height:100%; border:2px solid blue;">
    <div id="content" style="border:1px solid red; position:absolute; left:0; top:0;">absolute element</div>
</div>
</div>

以上代码中，content 的父元素虽是 div1，但，按照标准它的包含块应该是 container。

原文请查看 KB008: 包含块( Containing block )

版权声明：本文为原创文章，版权归 neo 所有。
本文链接：https://idayer.com/containing-block/

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。

包含块( Containing block )

包含块