CSS中margin所有方向的百分比均以包含块宽度为基准，而非对应方向尺寸；绝对定位元素则以最近非static祖先的宽度为准；top/bottom定位值才以包含块高度为基准。
margin-top 百分比不是按父容器高度算的
这是最常让人困惑的一点：写 margin-top: 50%，直觉是“占父元素高度一半”，但实际结果往往对不上。根本原因在于——CSS 规范强制规定，所有方向的 margin 百分比（包括 margin-top、margin-bottom、margin-left、margin-right）都统一以包含块（containing block）的 width 为计算基准，而不是对应方向的尺寸。
- 父容器
width: 400px→margin-top: 25%=100px（不是按 height 算） - 即使父容器
height: 20px，margin-top: 100%仍等于400px - 该规则适用于普通流元素、
float元素，也适用于position: relative元素
绝对定位元素的 margin 百分比基准变了
当元素设了 position: absolute 或 fixed，它的“包含块”不再由最近的块级祖先决定，而是向上查找第一个 position 不为 static 的祖先（如 relative、absolute、fixed）。此时 margin 百分比就基于那个祖先的 width 计算；若没找到，则退回到视口（viewport）宽度。
.parent { position: relative; width: 600px; height: 300px; }
.child { position: absolute; margin-top: 10%; /* → 600px × 10% = 60px */ }- 如果
.parent没设position，.child的margin-top: 10%就会按视口宽度（比如 1920px）算出192px -
top/bottom百分比则不同：它们是相对于包含块的height计算的（注意区分！）
嵌套 + 百分比 = 基准层层传递
百分比 margin 不会“自动重置”基准，它始终锚定在最初那个包含块的宽度上。但在多层嵌套且内层有自身 width 设置时，容易误以为是“相对当前父级”，其实仍是相对最外层包含块宽度 —— 除非中间某层成了新的包含块（如加了 position: relative）。
<div style="width: 500px;"><div style="width: 80%;"><div style="margin-top: 10%;">→ 实际 = 500px × 10% = 50px</div></div></div>
- 中间层的
width: 80%不影响 margin 计算基准（它只是渲染尺寸） - 只有当你给中间层加
position: relative，它才可能成为新包含块，从而改变子元素 margin 的基准 - 这种“看不见的基准链”是响应式布局中留白突然变大/变小的常见根源
padding 和 margin 百分比行为一致，但别和 height 混淆
很多人发现 padding-top: 50% 也按父容器宽度算，就以为“CSS 所有百分比都这样”，但其实 height、max-height、line-height 等属性的百分比含义完全不同：height: 50% 是相对于包含块的 height（前提是包含块高度已知），而 margin 和 padding 则死守宽度基准不动摇。
立即学习“前端免费学习笔记（深入）”；
-
margin/padding百分比 → 统一按包含块width -
top/bottom（定位元素）→ 按包含块height -
height/max-height→ 按包含块height（但若包含块高度未明确，计算会失败或退为auto） -
line-height百分比 → 按父元素font-size，不是任何盒尺寸
真正麻烦的从来不是“怎么写”，而是你改了一个 margin-top: 10%，结果在手机上留白缩到 3px，在大屏上炸到 120px——因为没人提醒你，它背后锁死的是视口宽度。
