什么是CSS包含块（Containing Block）

﹏ヽ暗。殇╰゛Y 2022-08-21 11:47 195阅读 0赞

包含块（Containing Block）是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

包含块简单说就是定位参考框，或者定位坐标参考系，元素一旦定义了定位显示（相对、绝对、固定）都具有包含块性质，它所包含的定位元素都将以该包含块为坐标系进行定位和调整。

原理

一个元素盒子的位置和大小有时是通过相对于一个特定的长方形来计算的，这个长方形就被称之为元素的 containing block。一个元素的 containing block 按以下方式定义：

1.  用户代理（比如浏览器）选择根元素作为 containing block（称之为初始 containing block）。
2.  对于其它元素，除非元素使用的是绝对位置，containing block 由最近的块级祖先元素盒子的内容边界组成。
3.  如果元素有属性 'position:fixed'，containing block 由视口建立。
4.  如果元素有属性 'position:absolute'，containing block 由最近的 position 不是 static 的祖先建立，按下面的步骤：
    
    1.  如果祖先是块级元素，containing block 由祖先的 padding edge 形成。
    2.  如果祖先是内联元素，containing block 取决于祖先的 direction 属性。
        
        1.  如果 direction 是 ltr（左到右），祖先产生的第一个盒子的上、左内容边界是 containing block 的上方和左方，祖先的最后一个盒子的下、右内容边界是 containing block 的下方和右方。
        2.  如果 direction 是 rtl（右到左），祖先产生的第一个盒子的上、右内容边界是 containing block 的上方和右方，祖先的最后一个盒子的下、左内容边界是 containing block 的下方和左方。

如果没有祖先，根元素盒子的内容边界确定为 containing block。

例子

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

没有指定 position，上方的代码的 containing blocks (C.B.) 确定方式如下：

<table style="margin:0px 0px 20px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; border-collapse:collapse; border-spacing:0px; background:transparent"> 
 <tbody style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent"> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent"> 
   <th align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> 产生盒子的元素&nbsp;</th> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> 其 C.B. 为</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent"> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> body</td> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> initial C.B. (UA-dependent)</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent"> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> div1</td> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> body</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent"> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> p1</td> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> div1</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent"> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> p2</td> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> div1</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent"> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> em1</td> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> p2</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent"> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> strong1</td> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> p2</td> 
  </tr> 
 </tbody> 
</table>

如果我们设置 div1 的 position：

\#div1 \{ position: absolute; left: 50px; top: 50px \}

div1 的 containing block 就不再是 body，它变成了初始 containing block（因为这里还没有具有 position 的祖先盒子）。

如果我们按如下方式放置 em1：

\#div1 \{ position: absolute; left: 50px; top: 50px \}  
\#em1  \{ position: absolute; left: 100px; top: 100px \}

containing blocks 变成如下：

<table style="margin:0px 0px 20px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; border-collapse:collapse; border-spacing:0px; background:transparent"> 
 <tbody style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent"> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent"> 
   <th align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> 产生盒子的元素&nbsp;</th> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> 其 C.B. 为</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent"> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> body</td> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> initial C.B.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent"> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> div1</td> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> initial C.B.</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent"> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> p1</td> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> div1</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent"> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> p2</td> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> div1</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent"> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> em1</td> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> div1</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; outline:0px; vertical-align:baseline; background:transparent"> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> strong1</td> 
   <td align="middle" style="margin:0px; padding:0px; border:0px; outline:0px; font-size:16px; vertical-align:baseline; background:transparent"> em1</td> 
  </tr> 
 </tbody> 
</table>

通过放置 em1，它的 containing block 变成了最近的具有 position 的祖先盒子（也就是：div1）。

名词解释

根元素－源文件中，每一个元素都有一个父元素，只有一个例外，它就是根元素。

视口－通过解析文档，连续媒体（比如屏幕就是连续媒体，而打印机则是基于页的媒体）给用户产生一个视口（一个窗口或其它在屏幕上显示的区域）。

padding edge－请参见下图：

![boxdim][]

[boxdim]: http://www.caopeng.net/wp-content/uploads/newly_saved_images/2011/02/043001YYq.gif