一个元素的占用面积大小以及布局定位通常受到包含块（Containing Block）的影响，比如 top 和 left 取百分比时相对的长度是什么长度，width 和 height 取百分比时相对的长度是什么长度？
包含块一般情况下是当前元素的最近的祖先块元素¹的内容区域，但具体还需要分情况来确定。

布局区域

浏览器渲染文档时，对于每一个元素，都会有一个布局盒子，该盒子又被划分为四个区域。

• 内容区域——Content Area
• 内边距区域——Padding Area
• 边框区域——Border Area
• 外边距区域——Margin Area

box-sizing 设为 border-box，会影响 width 和 height 的计算，但不影响布局区域的划分。

继续阅读 →

视窗百分比长度是指相对于视窗¹的尺寸，包含了 vw、vh、vmin 和 vmax。

• vw：视窗宽度的 1%
• vh：视窗高度的 1%
• vmin：min(vw, vh)
• vmax：max(vh, vh)

其中，视窗一般是指浏览器文档渲染窗口，但对于 iframe 里的文档而言，它们的视窗是 iframe 元素的 内容区域（content area） 的大小。

参考资料

• 视窗百分百长度（Viewport-percentage lengths）- MDN