10.1 “包含块”的定义 - acelan86/css GitHub Wiki

一个元素的盒，其尺寸和位置计算有时相对于某一确定的矩形，称为包含块。一个元素的包含块的定义如下：

  1. 根元素所在的包含块称为初始包含块。对于连续媒介。。。。。
  2. 对于其它元素，如果它的position是'static'或'relative',它的包含块由最近的祖先块盒创建。
  3. 如果元素设置了'position: fixed'，包含块由连续媒介的视点创建。
  4. 如果元素设置了'position: absolute'，包含块由最近的position值为'relative'、'absolute'或'fixed'的祖先元素创建，方法如下：

如果该祖先是行内元素，包含块围绕该元素生成的第一个行盒和最后一个行盒。在CSS2.1中，如果该行内元素被分割成多行，包含块没有定义。

否则该祖先是块级元素的话，包含块由它的内边距的边建立。

如果没有祖先，包含块是初始包含块。

没有指定position，下面文档的包含块:

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

建立如下:

生成盒 创建包含块元素
html 初始包含块
body html
div1 body
p1 div1
p2 div1
em1 p2
strong1 p2

如果我们设置div1 position:

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

它的包含块就不在是body，而是初始包含块。

如果我们同时指定em1 position：

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

上面的表变成这样：

生成盒 创建包含块元素
html 初始包含块
body html
div1 初始包含块
p1 div1
p2 div1
em1 div1
strong1 p2

译者注：包含块例子 ---by fedeoo

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️