containing block

翻译自：https://www.w3.org/TR/2016/WD-CSS22-20160412/visudet.html

在HTML文档中，每一个元素都被表示成一个矩形的盒子。这个盒子所依赖的布局环境就是包含块（containing block）。多数盒子的位置和大小都是相对于包含块来计算的。

containing block的作用

每一个盒子都会相对于其包含块有一个相对位置，但当元素设定overflow为某些值时盒子的位置并不一定是由包含块来确定。对于绝对定位元素（元素的position为absolute或fixed）而言，其 width, height, padding, margin, and offset值为百分比时，这些值是根据包含块来计算的。

如何确定containing block？

一、根元素（root element）所在的包含块叫做 initial containing block. 

对于continuous media而言， initial containing block的大小等于viewport，坐标原点为画布的起点。所以，initial containing block的位置与大小是不可变的。对于分页媒体而言，initial containing block的direction属性与root element相同。

二、其他元素的包含块由其position属性确定

1.  当position属性为static或者relative时，元素的containing block由最近的元素属性为块容器或形成了FC的祖先元素的content box。  
2. 当position属性为absolute时，元素的containing block由最近的position属性非static的祖先元素的padding box形成.
   • 当查找到的祖先元素为行内元素，对应的包含块由该行内元素的第一个行内盒子和最后一个行内盒子形成的盒子的padding box生成。在CSS2.2中规定，若此行内元素跨行，则其包含块为undefined。
   • 当查找到的行内元素不是行内元素时，对应的包含块由该元素的padding box生成。
3. 当position属性为fix时，元素的containing block由viewport (in the case of continuous media) or the page area (in the case of paged media)形成.

百分比值的计算

对于绝对定位元素（元素的position为absolute或fixed）而言，其 width, height, padding, margin, and offset值为百分比时，这些百分比是根据包含块来计算的。

1. 垂直方向上的属性：height, top, and bottom 的百分比由containing block的height计算得来的。但如果元素本身的position值为relative or static并且containing block的高度没有明确指定即（the height of the containing block depends on its contents), 这些值将会变成0。
2. 水平方向上的属性：width, left, right, padding, and margin properties 的百分比由containing block的width计算得来的。