Definition of "containing block" 细说包含块

来源：互联网发布：石头网络刷钻软件编辑：程序博客网时间：2024/06/05 19:08

（如果翻译的很狗血千万要指正）
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. The containing block of an element is defined as follows:

元素盒子的位置和大小有时候依赖于某些矩形来计算，这个矩形就是该元素的包含块。一个元素的包含块定义如下：

一、根元素的包含块

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.

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

二、position为relative/static元素的包含块

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

如果该元素 ‘position: relative’或’position: ‘static’，其元素的包含块是由最近的祖先块级元素的内容区域构成。

三、position为fixed元素的包含块

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

如果该元素的’position: fixed’，他的包含块是通过视口决定的。

四、position为absolute元素的包含块

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:

如果是该元素 ‘position: absolute’，他的包含块是最近的position为absolute、relative、fixed的祖先元素组成（不一定是块元素奥），并且遵循如下规则：

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

如果最近的position为absolute、relative、fixed的祖先元素是一个行级元素，那么包含块是围绕着第一行或者最后一行的padding boxes构成的一个盒。（翻译的很狗血~ 根据我自己的理解做了一个实例）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body><p style="border:1px solid; width:80%;">|<span style="background-color:#C0C0C0; position:relative;padding:0 50px;line-height: 20px">     它的包含块是相对定位的SPAN它的包含块是相对定位的SPA它的包含块是相对定位的SPAN它的包含块是相对定位的SPA它的包含块是相对定位的SPAN它的包含块是相对定位的SPA它的包含块是相对定位的SPAN它的包含块是相对定位的SPA     <span style="position:absolute;color:red; top:0px; left:0;">X</span>     <span style="position:absolute;color:red; top:20px;left:0;">X</span>     <span style="position:absolute;color:red; top:40px;left:0;">X</span>     <span style="position:absolute;color:red; top:60px;left:0;">X</span>     <span style="position:absolute;color:red; top:80px;left:0;">X</span>     <span style="position:absolute;color:red; bottom:0px; right:0px">X</span>     <span style="position:absolute;color:red; bottom:20px; right:0px">X</span>     <span style="position:absolute;color:red; bottom:40px; right:0px">X</span>     <span style="position:absolute;color:red; bottom:60px; right:0px">X</span>     <span style="position:absolute;color:red; bottom:80px; right:0px">X</span>    </span>| </p></body></html>

这里写图片描述
注意这个包含块的范围是上下行的padding边界所围成的奥。

如果还没领会的话可以自己试验一下。

（2）如果祖先元素不是行级元素

Otherwise, the containing block is formed by the padding edge of the ancestor.

其他情况下（最近的position为absolute、relative、fixed的祖先元素不是一个行级元素）那么，包含块为position为absolute、relative、fixed祖先元素的padding边界构成。(注意和（1）一样都是padding box)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div style="border:1px solid;width:200px;height:200px;position:relative;padding:50px;">        <div style="position:absolute;width:200px;height:200px;background-color:red;top:0;left:0;">        </div>    </div></body></html>

这里写图片描述

（3）没有祖先元素

If there is no such ancestor, the containing block is the initial containing block.

最后如果没有找到定位了的祖先元素的话，那么包含块就是初始包含块（ initial containing block）。

0 0