包含块 ​

一个元素的尺寸和位置通常受到包含块（containing block）的影响，因为我们时常会通过百分比来设置元素的尺寸和位置，而这个百分比的依据就是通过该元素的包含块来计算的。

如何确定包含块？ ​

确定一个元素的包含块的过程完全依赖于这个元素的 position 属性：

1. 若元素的定位方式为 static、relative 或 sticky，则他的包含块既是距离最近的祖先块级元素。
2. 若元素设置的定位方式为fixed，则他的包含块是视口(html)
3. 若元素设置的定位方式为absolute，则他的包含块是距离最近的设置了非静态定位的块级元素。

百分比单位 ​

某些CSS属性若值为百分比时，就是通过其包含块决定的，例如:width、height、padding、margin。

• width，根据包含块宽度*百分比的结果来设置宽度
• height，根据包含块高度*百分比的结果来设置高度
• padding，根据包含块宽度*百分比的结果来设置内边距(哪个方向都一样)
• margin，根据包含块宽度*百分比的结果来设置外边距(哪个方向都一样)