CSS包含块（the containing block）和与之相关的百分比属性

一个元素的大小和位置的设置与它的包含块有关。CSS包含块是个很重要的概念，通常人们认为一个元素的包含块就是它的父元素的内容区域，这是不对的。
一个元素的包含块取决于该元素的position属性的值。

 - position：static/relative 元素的包含块为离它最近的块状祖先元素的content-box的大小。
 - position：absolute 元素的包含块为离它最近的设置定位属性为非static的祖先元素的padding-box的大小。
 - position：fixed 元素的包含块为视口的大小。
 - position：absolute/fixed 元素的包含块也可能是由满足下列条件之一的最近的祖先元素的padding-box的大小。（设置了transform属性并且该属性不为none或者是设置了filter）

另外，根元素所处的包含块被称为初始包含块。（the initial containing block. ）

• content-box：width/height=内容区域的宽/高
• padding-box:width/height=内容区域的宽/高+padding
• border-box:width/height=内容区域的宽/高+padding+border

当以百分比的形式设置width，height，padding，margin这类与盒子模型有关的属性或top，right，bottom，left这类与定位有关的属性时，它们的实际大小与它们的包含块有关。
- top，bottom，height是基于包含块的height计算的，若包含块的height是由内容撑开的，那么这些值最终就会变为0。
- left，right，margin，padding，width是基于包含块的width计算的。（其中也包括padding-top，padding-bottom，margin-top，margin-bottom）。

参考链接：
https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block