padding-top: 50%按父元素的width计算，如父宽400px，则实际为200px，与父高度无关；该规则适用于所有padding方向，源于W3C标准为避免循环依赖并统一计算基准。
因为W3C标准明确要求：所有padding的百分比值，无论padding-top、padding-bottom还是padding-left、padding-right，都必须相对于包含块的宽度计算——不是高度，也不是自身尺寸。
padding-top: 50% 到底是按谁算的？
它按父元素的width算，哪怕你写的是垂直方向。比如父元素width: 400px，子元素padding-top: 50% → 实际就是200px，和父元素高度是100px还是1000px完全无关。
常见错误现象：
- 以为
padding-bottom: 100%能撑出“和父高相等”的空间，结果发现只撑了父宽的100% - 在flex容器里给子项设
padding-top: 20%，却没意识到这个20%仍来自flex容器的宽度，而非其高度
关键原因有两个：
- 避免循环依赖：如果
padding-top依赖父高，而父高又可能由子项内容（含padding）决定，浏览器就无法解析布局 - 保持水平/垂直计算逻辑统一：所有
margin、padding、left/right（在绝对定位中）都用同一基准，降低实现复杂度
什么时候会“看起来不像按宽度算”？
那通常是因为你没看清“包含块”是谁。百分比永远基于**包含块的宽度**，但包含块不一定是直接父元素：
- 普通流中，包含块通常是父元素的内容区（即
parent width - parent padding - parent border） - 如果父元素
position: relative，而子元素position: absolute，那么子元素的padding仍按它自己的包含块（也就是最近的非static祖先）的宽度算，和定位偏移top/left的参考对象无关 - 在
transform: scale()或iframe嵌套等场景下，包含块可能被重定义，需具体检查
验证方法：临时给父容器加border: 1px solid red和padding: 1px，再观察子元素padding是否随父width缩放——而不是看它“视觉上像不像撑高了”。
box-sizing 和百分比 padding 能一起用吗？
能，但要注意：无论box-sizing是content-box还是border-box，padding的百分比计算方式都不变——始终基于包含块宽度。变的只是最终渲染时“这些padding占不占width空间”：
-
box-sizing: content-box（默认）：width: 100%只管内容区，加上padding: 5%后，总宽度 = 内容宽 + 左右padding → 很可能溢出 -
box-sizing: border-box：width: 100%已包含padding和border，此时padding: 5%是从这100%里“向内扣”的，不会额外撑开
所以真正影响布局表现的，是box-sizing和width的组合，而不是padding百分比本身的计算逻辑。
最易被忽略的一点：这个规则对margin同样成立——margin-top: 10%也是按父宽算的。很多人调间距时反复试height或min-height，其实该先确认父容器宽度是否稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
