包含块(the containing block)

一个元素的大小和位置都受其父级元素的影响。通常来说，包含块是一个元素最近的块级父级的内容区域，不过也有一些例外的情况。
让我们熟悉一下盒子

1. 内容区域
2. 内边距区域
3. 边框区域
4. 外边距区域
   <图先欠着>

通常我们认为包含块就是其父级内容区域，但这不一定对。

包含块的影响

在学习什么决定了一个元素的包含块之前，让我们先了解一下它的重要性。
一个元素的大小和位置通常受到它包含块的影响。width,height,padding,margin，还有绝对定位元素的偏移属性的百分比值都是从元素的包含块计算得来的

确认包含块

确认一个元素的包含块，完全依赖于元素的position属性

1. 如果position是static``relative,sticky，包含块来自元素最近父级元素的内容盒子的边界，父级元素要么是一个块容器（如：inline-block，block或list-item），要么是建立了一个格式化上下文（如：表格容器，flex容器，网格容器，或者块级容器本身）
2. 如果position是absolute，包含块是来自position是非static的，最近的父级元素的内边距盒子的边界。
3. 如果position是fixed，包含块是建立在视图窗口的。
4. 如果position是absolute或fixed，包含块可能来自有如下情况的最近父级的内边距盒子的边界：
   1. transform和perspective不为none
   2. will-change是transform或perspective
   3. filter值不为none，或者will-change的值是filter
   4. contain的值paint

从包含块计算百分比的值

1. height，top，bottom是从包含块的height计算得出
2. width，left，right，padding，margin是从包含块的width计算得出