【CSS】基本重要概念：包含块

什么是包含块？

关于包含块的定义，引用MDN定义：

一个元素的尺寸和位置经常受其包含块(containing block)的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。

由根元素生成的包含块叫做 初始包含块（initial containing block）。

包含块的作用

包含块内 所包含元素的 尺寸（width \ height \ padding \ margin）、位置绝对定位元素的偏移值（position: absolute \ fixed时的top \ bottom \ right \ left），若以百分比赋值，其计算值得基准为包含块的content-box边缘区域：

1. height / top / bottom 中的百分值的基准：包含块的 height 的值。若包含块的height值会根据它的内容变化，且position: relative / static ，那么这些值的计算值为 auto。
2. width / left / right / padding / margin 中百分值的基准：包含块的 width 属性的值。

如何确定一个元素是否为包含块？

确定判定依据依赖于这个元素的position属性：

1. position: static/relative/sticky，包含块 为其 最近的祖先 块元素（inline-block, block 或 list-item元素）、建立格式化上下文的容器盒(table container, flex container, grid container, 或者是the block container自身)的内容区边缘(图示见下文)组成。
   
2. position: absolute，包含块就是由它的最近的 position 的值不是 static （也就是值为fixed, absolute, relative 或 sticky）的祖先元素的内边距区的边缘组成。
   
3. position: fixed，在连续媒体的情况下(continuous media)包含块是 viewport；在分页媒体(paged media)下的情况下包含块是分页区域(page area)。
4. position: absolute/fixed时，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：
   • transform 或 perspective 的值不是 none
   • will-change 的值是 transform 或 perspective
   • filter 的值不是 none 或 will-change 的值是 filter(只在 Firefox 下生效).
   • contain 的值是 paint (例如:contain: paint;)

注意: 根元素()所在的包含块是一个被称为初始包含块的矩形。他的尺寸是视口 viewport (for continuous media) 或分页媒体 page media (for paged media).