padding百分比值（含top/bottom）一律基于包含块宽度计算，与父元素高度无关；例如父宽80px时padding-top:50%恒为40px，非200px，因基准是包含块而非直接父元素。
因为浏览器必须避免布局循环依赖，所以所有 padding 百分比（包括 padding-top、padding-bottom）强制基于包含块的宽度计算，不是父元素的 width 属性值，更不是父元素高度。
padding-top: 50% 为什么算出来是 40px 而不是 200px？
常见错误现象：父容器明明高 400px、宽 80px，但 padding-top: 50% 却只生效为 40px（= 80px × 50%），而不是你预想的 200px。
原因很简单：它压根不看父容器高度。它看的是“包含块”的宽度——而这个包含块，很可能不是你写的那个直接父 <div>，而是上层某个设了 position: relative 的祖先，或是 flex 容器的内容区宽度。
使用场景举例：
立即学习“前端免费学习笔记（深入）”；
- 你在
display: flex容器里写padding-bottom: 100%做正方形占位，结果子项没撑开？那大概率是因为子项没设flex: 1或width: 100%，导致它的“包含块宽度”只是内容宽度（比如 120px），padding-bottom: 100%就只有 120px - 你在
position: absolute子元素上写padding: 10%，结果基准变成定位祖先的 padding box 宽度（含 padding，不含 border），而非视觉上最近的父元素
display: table-cell 里 padding 百分比完全失效
这不是 bug，是 CSS2.1 明确规定的例外行为：display: table-cell 下所有 padding 百分比值被当作 0 处理，浏览器连计算步骤都跳过。
容易踩的坑：
- 用
display: table-cell做垂直居中时，想靠padding-top: 20%加顶部留白？没用，直接写padding-top: 16px或换容器类型 - 检查 DevTools 的 Computed 面板，你会看到
padding-top显示为0px，哪怕你写了20%
怎么快速确认当前 padding 百分比到底参照谁？
别猜“看起来像不像”，用可验证的方式定位包含块：
- 给疑似父容器加
border: 1px solid red和padding: 1px，拖动窗口宽度，观察子元素padding-top是否随该容器宽度线性变化 - 在 DevTools 的 Computed 面板里找到
padding-top的像素值（比如64px），再除以你怀疑的基准宽度（比如容器宽度是640px），若结果 ≈ 10%，说明基准就是它 - 重点检查是否设置了
position: relative/absolute/fixed—— 这会让子元素的包含块向上跳转，脱离直接父元素
真正容易被忽略的，是“包含块”和“直接父元素”经常不一致。遇到 padding-bottom: 50% 表现异常时，第一反应不该是调样式，而是打开 DevTools，一层层点开父级的 position、display、flex 等属性，看宽度来源到底落在哪一级。
