CSS3包含块及其定位判定_html/css

包含块简介

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

 
 
 
hi
 
 

以上代码为例，DIV 和 TABLE 都是包含块。DIV 是 TABLE 的包含块，同时 TABLE 又是 TD 的包含块，不是绝对的。

“一个框的包含块”，指的是“该框所存在的那个包含块”，并不是它建造的包含块。比如，上述代码中，TABLE 的包含块，说的是 DIV 建造的包含块，而不是 TABLE 自身建造的包含块。TABLE 建造的包含块，可以称作 TD 的包含块。

每个框关于它的包含块都有一个位置，但是它不会被包含块限制；它可以溢出(包含块)。包含块上可以通过设置 ‘overflow’ 特性达到处理溢出的子孙元素的目的。

包含块的概念很重要，因为可视化格式模型中很多的理论性知识都跟这个概念有关系，比如，宽度高度自动值的计算，浮动元素的定位，绝对定位元素的定位等等。不了解包含块，就掌握不好以它为基础的后续理论。

包含块判定及其范围

由上面内容可知，元素框的定位和尺寸与其包含块有关，而元素会为它的子孙元素创建包含块。

那么，是不是说，元素的包含块就是它的父元素呢？包含块的区域是不是父元素的内容区域呢？ 答案是否定的。此节中，将给出各类元素包含块的判断以及包含块的区域范围。 如果不存在符合判断标准的祖先元素，那么元素的包含块就是初始包含块。

包含块判定总流程图如下：

根元素

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

根元素存在的包含块，被叫做初始包含块 (initial containing block)。具体，跟用户端有关。

在 (X)HTML 中，根元素是 html 元 素（尽管有的浏览器会不正确地使用 body 元素）。
而初始包含块的 direction 属性与根元素相同。

静态定位元素和相对定位元素

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

元素如果未声明 ‘position’ 特性，那么就会采用 ‘position’ 的默认值 “static”。

 
 
 greed is good 999999 
 

包含块关系表：

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

固定定位元素

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

绝对定位元素

总的来说，绝对定位（”position: absolute”）元素的包含块由离它最近的 ‘position’ 属性为 ‘absolute’、’relative’ 或者 ‘fixed’ 的祖先元素创建。

如果其祖先元素是行内元素，则包含块取决于其祖先元素的 ‘direction’ 特性

 T 这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。 XX XX XX 

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

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

包含块的宽度可能是负的。

示例代码：

 TEXT TEXT TEXT 这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。 XX XX XX 

以上的边界无法围成一个区域，在这种情况下，包含块的宽度是负的。

2). 如果 ‘direction’ 是 ‘rtl’，包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界 (padding edges) ，左、下边是祖先元素生成的最后一个框的左、下内边距边界 (padding edges)

示例代码：

 T 这段文字从右向左排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。可以通过它们绝对定位的位置来判断它们…… XX XX XX 

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