padding-top百分比始终基于父容器宽度计算，与高度无关；嵌套时因每层父宽不同导致错位；应优先使用aspect-ratio或calc()替代。
padding-top 百分比的计算基准不是高度
它永远基于父容器的 width，哪怕你写的是 padding-top: 100%。如果父宽是 320px，那这个值就是 320px，和父高、子高、视口高全无关系。所谓“拉伸成方形”，其实是你恰好让父容器宽度等于你期望的高度——比如在手机竖屏下父宽 375px，padding-top: 100% 撑出 375px 高，视觉上像正方形，但本质是宽度驱动的巧合。
嵌套时“方形”会失准，因为每层都依赖上层宽度
当你在多层嵌套中叠加 padding-top: 100%，每一层的 padding 都按**自己父级的 width** 计算，而不是最外层或视口。结果是：
- 外层容器宽 375px →
padding-top: 100%= 375px - 中间层宽 340px（减去外层 padding 后）→ 它的
padding-top: 100%= 340px - 内层宽可能只剩 300px → padding 又变成 300px
最终各层高度不一致，内容错位，“方形”彻底瓦解。更麻烦的是，这些宽度本身还受 box-sizing、margin 塌陷、font-size 继承等隐形因素扰动，调试时很难归因到 padding 本身。
用 aspect-ratio 或 calc() 替代嵌套百分比 padding
想真正控制宽高比，别靠嵌套 padding 拼凑。现代方案更直接可靠：
- 要固定比例：用
aspect-ratio: 1/1（支持 Safari 15.4+、Chrome 88+），配合width: 100%即可自适应正方形 - 要相对视口：用
padding-top: calc(100vh * 0.5)明确表达“视口高度的一半”，不依赖任何父宽 - 要兼顾老浏览器：只在外层容器用一次
padding-bottom: 100%+position: relative，内部内容用position: absolute填充——别在子元素上再套同类规则
行内元素上写 padding-top 百分比根本不会生效
a、span 这类默认 display: inline 的元素，上下 padding 不会撑开行框（line box），数值虽被解析，但视觉上“看不见”。如果你在嵌套的 span 里写了 padding-top: 100%，它既不改变高度，也不影响布局，纯属无效操作。必须先改 display: inline-block 或 inline-flex，再注意 vertical-align 默认是 baseline，容易引发底部空白。
真正难的不是让某一层看起来像正方形，而是意识到：百分比 padding 是个单向工具——它只认父宽，不认你想要的比例目标。盯住“我要一个响应式正方形”，就该用 aspect-ratio；盯住“我要占屏幕三分之一高”，就该用 vh。绕过它的设计约束，比强行嵌套调试省力得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
