包含块

建议直接阅读官方文档：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/All_About_The_Containing_Block

以下为自己的简单整理：

一个元素的尺寸和位置经常受其包含块的影响。

大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。比如一些 position 为 absolute 或其他值的元素。

一、包含块的影响

元素的尺寸及位置，常常会受它的包含块所影响。对于一些属性，例如 width, height, padding, margin，绝对定位元素的偏移值 （比如 position 被设置为absolute 或 fixed），当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。

二、根据包含块计算百分值

要计算 height top 及bottom 中的百分值，是通过包含块的height 的值。如果包含块的 height 值会根据它的内容变化，而且包含块的position属性的值被赋予 relative 或 static ，那么，这些值的计算值为 0。

要计算 width, left, right, padding, margin 这些属性由包含块的 width 属性的值来计算它的百分值。

三、确定包含块

如果 position 属性为static或 relative ，包含块就是由它的最近的祖先块元素（比如说inline-block, block 或 list-item元素）或格式化上下文(比如说 a table container, flex container, grid container, or the block container itself)的内容区的边缘组成的。

如果 position 属性为absolute ，包含块就是由它的最近的 position 的值不是 static（也就是值为fixed, absolute, relative或sticky）的祖先元素的内边距区的边缘组成。

如果 position 属性是fixed，在连续媒体的情况下(continuous media)包含块是 viewport ,在分页媒体(paged media)下的情况下包含块是分页区域(page area)。

如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：