能做出响应式正方形，因::before的padding-top百分比按父宽计算并参与盒模型高度，需配合position:relative与absolute定位内容，否则错位或失效。
直接用 ::before + padding-top: 100% 能做出响应式正方形，但必须配合 position: relative 和子元素的 position: absolute，否则内容会错位或高度失效。
为什么 ::before 的 padding-top 能撑高容器
因为伪元素的 padding-top 百分比是按父容器宽度计算的——哪怕它没内容、没显式 height，只要设了 display: block，这个 padding 就会参与盒模型高度计算。关键在于：它不依赖子元素存在，也不改动 HTML 结构。
但注意：::before 默认是 inline 水平，必须加 display: block 或 table 才能触发 padding 生效；且父容器不能设 height，否则会压制伪元素撑高的效果。
标准写法里三个角色缺一不可
-
.square必须有position: relative：否则内部absolute子元素会向上找定位上下文，可能脱离预期范围 -
.square::before只负责撑高：只设content: ""、display: block、padding-top: 100%，不设 width/height，也不设 margin - 真实内容必须用
position: absolute填满：比如.square > *或具体类名，且要设top: 0; left: 0; width: 100%; height: 100%
iOS Safari 和旧 WebView 中常见失效原因
不是所有浏览器都严格按规范处理伪元素的百分比 padding，尤其 iOS 15.3 及更早、部分安卓 WebView 中，::before 的 padding-top 可能被忽略或算成 0。
立即学习“前端免费学习笔记（深入）”；
排查要点：
- 父容器是否被
flex: 1或width: auto导致“无明确宽度”？加min-width: 0或显式width: 100%修复 - 是否同时用了
float: left和position: absolute？二者冲突，删掉 float - 是否在伪元素上误加了
height或margin？这些会干扰 padding 的高度贡献
最易被忽略的一点：当父容器是 flex 或 grid 子项时，它的 width 必须可被明确解析（比如有 flex-basis、min-width 或固定 width），否则 padding-top: 100% 会失去计算基准。
