Containing block

发表于   |   分类于   |     |   阅读次数

在 CSS2.1 中，很多框的定位和尺寸的计算，都取决于一个矩形的边界，这个矩形，被称作是包含块( containing block )。 一般来说，(元素)生成的框会扮演它子孙元素包含块的角色，我们称之为：一个(元素的)框为它的子孙节点建造了包含块。包含块是一个相对的概念。

对于一个元素的包含块的定义如下:

  1. 根元素存在的包含块称为初始包含块
    • 在(X)HTML中，根元素是html元素
    • 初始包含块的direction属性与根元素相同。(direction属性指定了块的基本书写方向，它还规定了表格列布局的方向、水平溢出的方向等。)
    • 初始包含块的宽度可以由根元素的width属性指定。如果该属性取值为“auto”，用户端提供初始宽度（如，视口的当前宽度）
    • 初始包含块的高度可以由根元素的height属性指定。如果该属性取值为“auto”，包含块的高度将调整以适应文档内容（即由其内容决定其高度）。
    • 初始包含块的高度可以由根元素的height属性指定。如果该属性取值为“auto”，包含块的高度将调整以适应文档内容（即由其内容决定其高度）。
  2. 对于其它元素：如果该元素的定位（position）为“relative（相对）”或者“static（静态）”，它的包含块由它最近的块级、单元格（table cell）或者行内块（inline-block）祖先元素的内容区创建。
  3. 如果一个元素’position’为’fixed’，那么其包含块为当前屏幕的可视窗口
  4. 如果一个元素的’position’为’absolute’，那么其包含块则是最近的’position’为’relative’ 或’absolute’或 ‘fixed’的祖先元素,有如下几种情况：
    • 如果其祖先元素是行内元素，则包含块取决于其祖先元素的 “direction” 特性
    • 其他情况下，如果祖先元素不是行内元素，那么包含块的区域应该是祖先元素的内边距边界。
      containing

例如

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div></div>
    <p></p>
</body>
</html>

div的包含快为body，若为div设定position: absolute,则它的包含快为初始包含快

参考：
http://www.ddcat.net/blog/?p=1336
http://www.smallni.com/containing-block/