用::before而非padding-top是为了无侵入式撑高容器：它不改动HTML结构、不影响语义和文档流，通过display:block+padding-top百分比触发宽高计算，但需配合position:absolute或float脱离流，且父容器不能设height。
为什么用 ::before 而不是直接在元素上设 padding-top
因为有些场景下你不能/不想改动原始 HTML 结构，比如 CMS 输出的卡片、第三方组件封装的容器，或者需要保持语义纯净（如 <figure></figure> 里不能随便加 wrapper）。::before 提供了一种“无侵入式”的占位手段：它不依赖子元素存在，也不影响原有内容流，只负责撑开高度。
关键点在于：::before 是伪元素，它参与盒模型计算——只要设了 display: block 或 table，再配 padding-top 百分比，就能触发高度撑开。但必须配合 float 或 position: absolute 让它脱离文档流，否则会把后续内容往下顶。
-
::before的padding-top: 100%仍按父容器宽度计算，和普通元素一致 - 父容器本身**不能设
height**，否则会压制伪元素撑高的效果 - 如果父容器是
flex或grid子项，需确认其width可被明确解析（比如有flex-basis或min-width）
::before 正方形容器的标准写法
最简可靠组合：
.square {
position: relative;
width: 100%;
}
.square::before {
content: "";
display: block;
padding-top: 100%;
}
.square > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
说明：
-
.square必须设position: relative，否则absolute子元素会找更外层定位上下文 -
::before用display: block+padding-top: 100%撑高，不设height，也不设width - 真实内容（图片、文字等）必须用
position: absolute填满，不能靠margin或flex居中 - 如果内容是图片，记得加
object-fit: cover和display: block（防底部空白）
移动端 Safari 和旧 WebView 中 ::before + padding-top 失效的常见原因
不是所有浏览器都严格按规范处理伪元素的百分比 padding，尤其在 iOS 15.3 及更早、部分安卓 WebView 中，::before 的 padding-top 可能被忽略或计算为 0。
- 检查父容器是否被
flex: 1或width: auto导致“无明确宽度”——加min-width: 0或显式width: 100%修复 - 避免在
::before上同时用float: left和position: absolute，二者冲突 - 某些老版 Safari 对
::before的content: ""解析异常，可试content: "\00a0"（不间断空格） - 若必须兼容 iOS 14.x，建议降级为包裹一层真实 DOM 元素，而非强依赖伪元素
和 aspect-ratio 混用时的冲突表现
现代写法喜欢在同一个元素上既写 aspect-ratio: 1 / 1，又保留 ::before 作为 fallback。但这样会导致双重撑高——aspect-ratio 生效时，::before 的 padding-top 仍会额外增加高度，造成容器过高。
- 不要在同一元素上混用：要么纯
aspect-ratio（Chrome 88+/Firefox 89+/Safari 15.4+），要么纯::before方案 - 想渐进增强？用
@supports (aspect-ratio: 1 / 1)包裹现代写法，::before写在外部作用域作为降级 -
aspect-ratio不受父容器width是否明确影响，但::before方案完全依赖它——这是两者最根本的行为差异
真正容易被忽略的是：伪元素方案中，::before 撑开的是整个容器的 **content box 高度**，而 aspect-ratio 约束的是 **content box 的宽高比**，二者底层机制不同，不能简单叠加或互换理解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
