【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之一：包含块(containing block)

上个帖子中对可视化格式模型做了一个概述，并简单的介绍了一下包含块的概念，在这里：【分享】说说标准 --CSS中非常重要的可视化格式模型(visual formatting model)简介 。

这个帖子会就包含块的细节给出详细的讲解。

上回贴说到，一个元素box的定位和尺寸，有时候会跟某一矩形框有关，这个矩形框，就被称作元素的包含块。而元素会为它的子孙元素创建包含块，那么，是不是说，元素的包含块就是它的父元素呢？答案是否定的，这是一个误区。也正因为如此，才会有专门的一帖来说明它。

一个元素包含块的确定，跟元素自身和它的祖先元素的样式等有关系。

根元素的包含块

根元素，就是处于文档树最顶端的元素，它没有父节点。

根元素存在的包含块，被叫做初始包含块 (initial containing block)。具体，跟用户端有关。
●在(X)HTML中，根元素是html元 素（尽管有的浏览器会不正确地使用body元 素）。
●而初始包含块的direction属性与根元素相同。

“static”和”relative”定位的元素

对于其它元素：如果该元素的定位（position）为 “relative” （相对定位）或者 “static”（静态定位），它的包含块由它最近的块级、单元格 （table cell）或者行内块（inline-block）祖先元素的内容框创建。

关于内容框，见：【分享】说说标准 —— 你真的了解盒子模型(box model)吗？

元素如果未声明 “position” 特性 ，那么就会采用 “position” 的默认值 ”static”。所以，一般元素都是静态定位的。

比如：

<table id="table1">

  <tr>

      <td id="td1">

          <div id="div1" style="padding:20px;border:1px solid red;">

               <span>

                   <strong id=”greed” style="position:relative;">greed is</strong>

                   good 999999

              </span>

          </div>

      </td>

  </tr>

</table>

其中， 以上代码中，元素包含块表为：

SPAN元素中包含的文本在div1中的位置可以看出，div1创建的包含块的区域是它的内容边界，也就是内边界。

“position:fixed” 定位的元素

如果元素是固定定位 (“position:fixed”) 元素，那么它的包含块是当前可视窗口。

'position: absolute' 定位的元素

如果元素是绝对定位（”position: absolute”）元素，包含块由离它最近的 position 属性为 “absolute”、“relative” 或者 “fixed” 的祖先元素创建。

1. 如果其祖先元素是行内元素，则包含块取决于其祖先元素的 “direction” 特性

● 如果 '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>

以上代码中，文字采取默认从左到右的方式排列。红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。它们定位需要参照包含块，按照标准来说，它们包含块的左顶边是 SPAN形成的第一个框（即第一行的灰色部分）的顶、左内边距边，包含块的右、下边是SPAN 生成的最后一个框（最后一行灰色的部分）的右、下内边距边界。
图示：

行内元素内形成的包含块，在各浏览器中各不相同，存在兼容性问题。可以通过上面的例子可以证明这一点。蓝色的 “XX”的位置在各浏览器中都不一样。你可以打开浏览器试一下。

当行框是这样的时候，比较纠结：

<p style="border:1px solid red; width:200px; padding:20px;">

    TEXT TEXT TEXT

    <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>

包含块区域：

这时，会造成包含块的宽度为负。这时，绝对定位元素定位起来，肯定也很纠结。

● 如果 '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>

以上的包含块范围：


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

例如：

<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。

如果不存在这样的祖先元素，那么它的包含块就是初始包含块。

流程图



W3C 官方例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<HTML>

<HEAD>

    <TITLE>Illustration of containing blocks</TITLE>

</HEAD>

<BODY id="body">

<DIV id="div1">

    <P id="p1">This is text in the first paragraph...</P>

    <P id="p2">This is text <EM id="em1"> in the

       <STRONG id="strong1">second</STRONG> paragraph.</EM>

    </P>

</DIV>

</BODY>

</HTML>

元素包含块表为：


这个概念比较复杂，但最重要的是弄清楚，包含块是由哪个祖先元素创建的，以及创建的包含块区域。

更多 说说标准系列：【分享】说说标准系列目录