padding-top: 100% 能实现响应式正方形，因其百分比基于父容器宽度计算，配合 position: relative 和子元素 absolute 定位才能生效；需确保父容器有明确宽度且不设 height，兼容性差时可用 @supports 降级。
直接用 padding-top: 100% 就能实现响应式正方形容器，但必须配合 position: relative 和子元素的 position: absolute，否则高度不会被撑开，内容还会错位。
为什么 padding-top: 100% 能得到正方形
因为 padding-top 的百分比值是按父容器**宽度**计算的，不是高度。设成 100%，就等于“高度 = 父容器宽度”，自然形成 1:1 比例。这个特性是 CSS 盒模型里少数能实现“宽高联动”的原生机制。
常见错误现象：padding-top: 100% 写了但容器没变高？大概率是父容器没设 width，或者父级用了 display: flex 却没约束宽度上下文。
- 父容器必须有明确宽度（如
width: 100%、max-width: 400px或flex: none） - 不能给该容器设
height，否则会覆盖 padding 的占位效果 -
padding-bottom也行，但语义不如padding-top清晰，且容易和 margin 混淆
position: relative 和 absolute 缺一不可
外层容器设 position: relative 是为了让子元素的 position: absolute 有定位基准；子元素不绝对定位，就无法填满由 padding 撑出的空间——它只会流式排布在 padding 上方，留一大片空白。
典型结构：
.square {
width: 100%;
position: relative;
padding-top: 100%;
}
.square > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
- 子元素必须是直接子代（
> *），否则absolute可能相对于更外层定位 - 如果子元素是
<img>，记得加object-fit: cover或contain，否则拉伸变形 - 图片默认是
inline元素，加display: block可消除底部空白
在 Flex/Grid 布局中容易失效的场景
当正方形容器放在 display: flex 容器里时，padding-top 百分比可能被忽略或计算异常，尤其在 flex-direction: column 下，宽度上下文容易丢失。
- 给正方形容器加
flex: none，切断弹性拉伸干扰 - 或显式恢复宽度上下文：
min-width: 0; width: 100% - 避免把
padding-top直接写在 flex 容器自身上——它不是内容容器，而是布局容器 - iOS Safari 中，若父级用了
flex: 1但没设width，padding-top可能算成 0
现代方案要不要用 aspect-ratio？
可以，但别混用。如果项目只需支持 Chrome 88+、Firefox 89+、Safari 15.4+，直接写 aspect-ratio: 1 / 1 更简洁。但一旦需要兼容 iOS 14.5 以下或安卓 WebView，就得回退到 padding 方案。
安全写法是用 @supports 降级：
@supports not (aspect-ratio: 1 / 1) {
.square {
position: relative;
width: 100%;
padding-top: 100%;
}
.square > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
真正容易被忽略的是：padding 百分比依赖父容器宽度，而这个“父容器”可能隔着好几层才真正有 width —— 任何一层没设宽或被 flex shrink 干扰，整个链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
