Containing Block(包含块模型)

定义

css中，定位一个元素需要计算其和另外一个矩形区域的相对位置，这个矩形区域就是该元素的包含块。一般来讲，一个元素生成的矩形框扮演其子孙元素的包含块角色。

The position and size of an element’s box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element.
一个元素其盒子的位置和大小是参照一个特定的矩形框计算得到的，这个矩形框被称为这个元素的包含块。

界定

包含块的界定如下：

1. 根元素的包含块称为初始包含块，通常它的大小就是可视区域的大小。

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The ‘direction’ property of the initial containing block is the same as for the root element.

2. 位置属性设置为static或者relative的其他元素，它的包含块就是最近祖先的箱子模型中的内容区域（不论其父元素是行内元素还是块级元素）。

For other elements, if the element’s position is ‘relative’ or ‘static’,the containing block is formed by the content edge of the nearestblock container ancestor box.

3. 元素的position为fixed，那么该元素脱离HTML文档，其包含块为当前屏幕的可视窗口。

If the element has ‘position: fixed’, the containing block isestablished by the viewportin the case of continuous media or the page area in the case of paged media.

4. 如果元素的位置属性为absolute，那么该元素的包含块由最近的含有属性relative、absolute、fixed的祖先决定。如果该祖先元素是块级元素，那么包含块是其内边距所包围的区域（注意不是content区域）；如果是行内元素，那么元素的包含块是由该祖先第一个和最后一个inline框的内边距区域以及direction决定的（这个具体后面分析）。

If the element has ‘position: absolute’, the containing block is established by the nearest ancestor with a ‘position‘ of ‘absolute’, ‘relative’ or ‘fixed’, in the following way:

1. In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
2. Otherwise, the containing blockis formed by the padding edge of the ancestor

position：absolute

上面的第四条指出了两种情况：1. 包含块是块级元素； 2. 包含块是行内元素。我们展开分析：

块级包含块

块级包含块比较容易理解，需要注意的是它的边界是内边距，而不是content区域。依据标准盒模型可知，内边距包含了conten区域和padding：

  <style>
  .pr-outer{
        position: relative;
        height: 50px;
        width: 200px;
        padding: 20px;
        border: 1px solid red;
    }
    .pa-inner{
        position: absolute;
        left: 0;
        top: 0;
    }
  </style>
  <div class="pr-outer">
        <div class="pa-inner">absolute</div>
    </div>
    <div class="pr-outer">
        <div>普通</div>
    </div>

内边距和content比较.png
特别指出当postion:absolute时，top和left的默认值是auto。如果不显示设置这些属性，元素的位置和postion:static一致，把上面例子中pa-inner的top和left设置去掉：
absolute的默认值为auto 与static表现一致.png

行内包含块

行内包含块由两部分决定：1. 第一个和最后一个inline框的内边距； 2. 排版方向。

1. direction:ltr:
   包含块的左边界是祖先元素第一行的顶、左内边距边界，右边界是祖先元素最后一个框的底、右内边距边界。但是包含块的左边框不能比右边框靠右，最多是同一个位置。

  <div style="border:1px solid red; width:200px; padding:20px; direction:ltr;">
      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> 
  </div>

第一行的左边距在最后一行右边距的左边 第一行的左边距在最后一行右边距的右边 此情况下包含块的左右边距重叠

2. direction:rtl
   与1相反，此方向下包含块的右边界一定是元素的最右边，而左边界则最后一行的左边界。

<div style="border:1px solid red; width:200px; padding:20px; direction:rtl;">
      TEXT TEXT 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> 
  </div>

Paste_Image.png

总结

需要特别注意postion:absolute是的包含块模型，可以参考《webkit技术内幕》第6章第5小节对包含块模型的介绍。