CSS包含块

[mengxiong10]

包含块的定义

一个元素的盒模型的定位、尺寸常常会依据某个矩形(box)来计算，这个矩形就叫做这个元素的 包含块 （containing block）

包含块的作用

如果某些属性被赋予一个百分值的话，它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性：

1. height, top, bottom 这些属性由包含块的 height 属性的值来计算它的百分值。如果包含块的 position 属性的值是 relative 或 static,而且没有设置height属性(height 值依赖于它的内容) ，这些值的计算值为0。(设置height:100%, 需要设置包含块元素的height, 或者包含块元素的position不是relative,static)
2. width, left, right, padding, margin这些属性由包含块的 width 属性的值来计算它的百分值(padding-top,padding-bottom, margin-top,margin-bottom 也是根据包含块的width计算)

包含块的确定

1. 如果’position’为’relative’或’static’，那么其包含块则是由最近的祖先块元素（比如说inline-block, block 或 list-item元素）或格式化上下文(比如说 a table container, flex container, grid container, or the block container itself)的 内容区 创建
2. 如果 position 属性是 absolute 的话,包含块就是由它的最近的 position 的值不是 static （fixed, absolute, relative, or sticky）的祖先元素的 内边距区 的边缘组成的.(比较少见的情况,如果包含块的元素是行内元素且有多行,则是第一个行框的左上边界和最后一个行框的右下边界(direction: ltr 默认) 或者 第一个行框的右上边界和最后一个行框的左下边界(direction:rtl) )
3. 如果'position’为’fixed’，那么其包含块为当前视口(viewpost)创建.

特殊情况: 如果 position 属性是 absolute 或 fixed，包含块也可能是由transform or perspective 不是 none(will-change, filter 也可能)最近父级元素的内边距区的边缘组成的(dialog中设置transform: translate(-50%,-50%) 居中的时候, 可能会遇到)

容易混淆

position为relative或static或sticky的元素 其包含块是由其包含块元素的 Content Edge 创建
position为absolute的元素 其包含块是由其包含块元素的 Padding Edge 创建