padding-bottom百分比按包含块宽度计算而非高度，因按高度会引发循环依赖；css规范强制其基于包含块宽度，且包含块宽度未必等于父元素width属性值。
padding-bottom百分比为什么不是按父元素高度算的
因为会触发循环依赖。浏览器计算元素高度时，常需先知道padding、内容高度、border等；如果padding-bottom: 50%又反过来要基于“当前元素自身的高度”或“父元素高度”去算，那高度还没确定，padding就无法确定，padding不确定，高度又算不出来——直接卡死。
CSS规范（CSS2.1）明确要求：padding-top、padding-bottom的百分比值“must be calculated with respect to the width of the containing block”，即强制锚定到包含块宽度。这不是疏忽，是唯一能保证 layout 可解的设计。
包含块宽度 ≠ 父元素 CSS width 属性值
很多人以为“父元素设了width: 300px，padding-bottom: 20%就是60px”，但实际基准是“包含块的宽度”，它可能和父元素的width属性不一致：
- 若父元素是
position: static的普通块级元素，包含块通常是其最近块级祖先的内容区宽度（不含padding/border） - 若父元素设了
position: relative，而子元素设了position: absolute，那子元素的包含块就变成该relative父元素的padding box宽度（含padding，不含border） - 在
flex或grid容器中，子项默认仍是static定位，所以它的包含块宽度 = flex/grid 容器的内容区宽度，不是它自己被分配到的尺寸
padding-bottom: 100% 实现正方形时内容被挤出怎么办
这是最典型的“知道规则但不会用”的场景。仅写padding-bottom: 100%会让父容器撑高，但子内容仍按正常流渲染，直接掉到 padding 区域之外，甚至溢出不可见。
关键不是加 padding，而是把内容从文档流里“提出来”：
- 父容器设
position: relative，且不设height，只靠padding-bottom撑开 - 子内容（如
<img>或<div>）设<code>position: absolute; top: 0; left: 0; width: 100%; height: 100% - 若需文字居中，别依赖
line-height，改用display: flex; align-items: center; justify-content: center——注意这要作用在绝对定位的子容器上，或再包一层 - 用
aspect-ratio+ 固定宽：比如width: 100%; aspect-ratio: 1 / 1，再配合padding: 10%，此时百分比仍按宽度算，但因宽高相等，视觉上就“像按高度算” - 用
calc()+vh：如padding-top: calc(10vh + 20px)，适合已知视口高度参与的场景 - 用伪元素占位：
::before { content: ""; display: block; padding-top: 100%; }，再用position: absolute把真实内容叠上去 - JS 动态计算：监听
resize，读取父元素clientHeight，手动设置style.paddingBottom
想让内边距真正按高度缩放，有什么替代方案
CSS 原生不支持padding-bottom: 50vh或padding-bottom: 50% of height这种写法。真有垂直比例需求，得绕开百分比padding：
最易忽略的是：当你在grid或flex项里写padding: 10%，你以为它按自己尺寸算，其实它老老实实按 grid/flex 容器的宽度算——哪怕那个容器宽度是fit-content，结果可能小得离谱。
