padding-top百分比不按父元素高度计算，是因为会引发“高度依赖padding、padding又依赖高度”的循环依赖，导致布局无法收敛；w3c规范强制其统一基于包含块宽度计算，以确保布局稳定。
padding-top 百分比为什么不是按父元素高度算
因为 layout 阶段会陷入死循环：如果 padding-top: 50% 按自身或父元素高度计算，而该高度又由内容 + padding 共同决定，就形成“高度依赖 padding，padding 又依赖高度”的不可解循环。W3C 规范强制所有 padding 百分比（包括 padding-top、padding-bottom）统一锚定到**包含块的宽度**——这是唯一能保证布局收敛的确定值。
flex 子项里 padding-top: 10% 到底按谁的宽度算
默认按**flex 容器的 content box 宽度**算，不是子项自己伸缩后的宽度，也不是容器的高度。但容易踩坑的是：
- 如果子项没设
flex: 1或width: 100%，它的计算宽度就是内容撑开的宽度（比如只有120px），那padding-top: 10%就只有12px，看起来几乎无效 - 要让
padding响应 flex 容器宽度，必须先让子项“占满”可用空间：flex: 1或width: 100% -
justify-content和align-items不影响padding计算基准 - 若子项设了
position: absolute，包含块会跳转到最近定位祖先，不再是 flex 容器
怎么验证当前 padding-top 百分比到底参照谁
别靠视觉猜“像不像”，用可测量方式定位包含块：
- 在 DevTools 的 Computed 面板看
padding-top的像素值，反向除以你怀疑的宽度（比如父容器width或 flex 容器 content 宽），就能确认基准 - 检查父容器是否设置了
position: relative、absolute、fixed——这会改变子元素的包含块 - 特别注意
display: table-cell：它是 CSS 2.1 明确规定的例外，所有padding百分比值被当作0处理，不是 bug，是规范行为
display: table-cell 为什么 padding 百分比完全无效
这不是浏览器兼容问题，而是 W3C 规范明文规定：display: table-cell 下所有 padding 百分比值被忽略，等效于 0。主流浏览器一致执行。如果你看到 padding-top: 20% 在 table-cell 里没生效，不要反复调样式，直接换 display 类型（比如改 inline-block）或改用固定像素值。
真正容易被忽略的，是“包含块”未必等于“直接父元素”——遇到 padding 百分比异常时，第一反应不该是怀疑浏览器，而是打开 DevTools 逐层检查定位上下文和宽度来源，尤其是 position、display、flex、grid 这些会重定义包含块的属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
