padding-top百分比能撑出正方形，因其值按父容器宽度计算而非高度，从而绕过高度无法设为宽度百分比的限制；需确保父容器有明确宽度，子元素用绝对定位填充，内容样式需单独处理。
为什么用 padding-top 百分比能撑出正方形
因为 padding-top（和 padding-bottom）的百分比值，是相对于**父容器宽度**计算的，不是高度。这刚好能绕过“高度无法直接设为宽度百分比”的限制。
常见错误现象：height: 100% 在 flex 或 grid 容器里失效，或者设了 height: 50vw 但网格在不同断点下比例错乱。
- 必须确保父容器有明确宽度（比如
width: 100%或固定max-width），否则 padding 计算基准飘忽 - 子元素不能依赖
height布局，得用position: absolute把内容“塞进” padding 撑出来的空间里 - 这个技巧只控制容器占位比例，内容尺寸、文字流、图片缩放要单独处理
怎么写一个响应式正方形网格项（纯 CSS）
核心结构是：外层容器设宽，内层用 padding-top 制造等高，再用绝对定位把真实内容挂进去。
.grid-item {
position: relative;
width: 100%;
padding-top: 100%; /* 正方形：高 = 宽 */
}
.grid-item > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}- 如果要 3 列响应式，外层用
display: grid+grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 不要给
.grid-item设height，它靠 padding 占位，设 height 会破坏比例 - 图片建议用
object-fit: cover，避免拉伸变形；背景图用background-size: cover
移动端适配时容易漏掉的兼容细节
在 iOS Safari 和部分安卓 WebView 里，padding-top 百分比在 flex 容器中可能被误算——尤其当父级没设 width 或用了 flex: 1。
立即学习“前端免费学习笔记（深入）”；
- 给网格外层容器加
width: 100%或min-width: 0（防止 flex shrink 干扰宽度基准） - 避免在
.grid-item上同时用aspect-ratio: 1 / 1和 padding 技巧，旧版浏览器不支持aspect-ratio，但混用会导致现代浏览器重复计算 - 如果用
rem或vw控制列数，记得测试小屏下是否出现单列过宽、padding 太大导致页面横向滚动
什么时候不该用这个技巧
当你需要精确控制内容区域高度、或要支持 CSS 容器查询（@container）、或网格项内要嵌套多层 flex 布局时，padding-top 方案会变得难维护。
- 如果项目已用
aspect-ratio且不需要支持 iOS 15.4 以下，直接写aspect-ratio: 1更干净 - 服务端渲染（SSR）场景下，padding 撑高可能造成首屏布局偏移（FOUC），需配合骨架屏或 JS 补偿
- 可访问性要求高时，绝对定位的内容若没合理语义包裹（比如没包
<article>或role="figure"），会影响屏幕阅读器识别
padding-top 百分比是个很稳的 hack，但它不是“自动适应一切”的银弹——它的稳定，恰恰来自你主动放弃对高度的直接控制。
