百分比尺寸的参照物是包含块而非父元素：width等参照包含块宽度，height等参照高度，padding/margin均参照宽度，top/left参照包含块padding-box，transform则参照自身尺寸。
包含块不是父元素，而是“定位上下文锚点”
很多人写 width: 50% 时默认它参照父 <div> 的宽度，结果在绝对定位下发现尺寸对不上——问题就出在这里：**百分比的参照物是包含块（containing block），不是 DOM 上的直接父元素**。包含块由 position 属性触发，不是靠嵌套层级决定的。
- 普通流元素（
position: static或未设）：包含块 = 父元素的内容区（content-box），即父元素width/height减去padding和border -
position: absolute元素：向上查找第一个position值为relative、absolute、fixed或sticky的祖先，该祖先的padding-box（内容 + 内边距）就是包含块 -
position: fixed：包含块是视口（viewport），与文档流无关 - 没找到定位祖先？那包含块就是初始包含块（initial containing block），通常等同于根元素
<html>的尺寸
width/height/padding/margin 的百分比全按“包含块宽度”算？不全是
这是最常被误读的一点：width、height、padding、margin 看似都用百分比，但它们的参照维度并不统一，且和“方向”强相关。
-
width、max-width、min-width：参照包含块的 宽度 -
height、max-height、min-height：参照包含块的 高度（注意：若包含块高度未明确指定，height: 50%会退化为auto） -
padding-top/padding-bottom/padding-left/padding-right：全部参照包含块的 宽度（不是自身或父元素的 padding） -
margin-top/margin-bottom/margin-left/margin-right：同样全部参照包含块的 宽度
例如一个 position: absolute 子元素，其 padding-top: 20% 和 top: 20% 虽然都写 20%，但前者按祖父容器宽度算，后者按祖父容器高度算——数值一样，来源完全不同。
top/left/bottom/right 百分比为什么有时“偏了”
绝对定位元素的 top、left 等属性用百分比时，容易出现视觉错位，比如明明写了 top: 0% 却没贴顶——根本原因在于：它参照的是包含块的 padding-box 高度/宽度，而非 content-box。
立即学习“前端免费学习笔记（深入）”；
-
top: 10%= 包含块的height + padding-top + padding-bottom× 10% -
left: 10%= 包含块的width + padding-left + padding-right× 10% - 如果包含块设置了
padding: 40px，那top: 0%实际是从 padding-top 边缘开始算，不是从 content 区顶部 - 相对定位（
position: relative）则不同：它的top/left百分比参照的是自身height/width，和包含块无关
transform: translate() 是个例外，它只认自己
所有其他 CSS 百分比都在找“别人”（包含块或父元素）当尺子，唯独 transform: translate() 的百分比是基于元素自身的尺寸：
-
translateX(50%)= 自身宽度的 50% -
translateY(30%)= 自身高度的 30% - 这个行为和
top/left完全不同，也和margin不同，不能混用替代 - 常用于居中：配合
position: absolute+top: 50%; left: 50%; transform: translate(-50%, -50%)，这里前两个 50% 是参照包含块，后两个 -50% 是参照自身
真正难的不是记住规则，而是调试时意识到：你看到的“50%”，可能同时存在三种不同来源——包含块宽、包含块高、甚至元素自身。不查定位链，光看 HTML 结构，十有八九会猜错。
