padding-bottom百分比能撑出正方形，因其值基于父容器宽度计算，非自身高度；设width与padding-bottom相等（如均为30%）即可使视觉高度等于宽度，配合height: 0和position: absolute内容可精准实现自适应正方形。
为什么 padding-bottom 百分比能撑出正方形
因为 padding-bottom 的百分比值，是相对于父元素的 width 计算的，不是相对于自身高度。所以当父容器设 width: 30%、padding-bottom: 30% 时，底部内边距就等于父容器宽度的 30%，视觉上“高度”就和“宽度”一致了。
关键前提是必须让容器的 height 失效——否则内容或默认行高会干扰比例。所以通常配 height: 0，再靠 padding-bottom 唯一撑开空间。
-
padding-top也能用，但会导致内部内容从“正方形上方”溢出，不易控制 -
margin-bottom不行：它不参与盒模型高度计算，无法撑开容器 - 如果父容器
width是max(40px, 15%)这类响应式写法，padding-bottom依然按该值计算，比例仍成立
必须配合 position: absolute 吗
不是必须，但几乎总是需要。因为 height: 0 + padding-bottom 撑出来的空间本身不承载流式内容——<img> 或文字会默认在 height: 0 区域下方渲染，导致错位或溢出。
典型解法是用绝对定位把内容“钉”进这个 padding 撑出的空间里：
.wrapper {
width: 25%;
height: 0;
padding-bottom: 25%; /* 正方形比例 */
position: relative;
overflow: hidden;
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
-
overflow: hidden要加，防原始图片宽高比严重偏离 1:1 时边缘露出来 -
display: block对<img>很重要，否则 inline 默认行为会在底部留空白间隙 - 如果只放纯色块或背景图，且不关心语义，可省略子元素，直接用
background-image配background-size: cover
aspect-ratio 能替代它吗
能，但要看兼容性需求。aspect-ratio: 1 / 1 写法简洁直接：
.modern-square {
width: 25%;
aspect-ratio: 1 / 1;
}
但它在 iOS Safari ≤ 15.4、Android Browser 和部分旧版 WebView 中不支持。如果你的项目需兼容微信内置浏览器（尤其安卓端）、QQ 浏览器或企业微信内嵌页，padding-bottom 方案仍是更稳妥的选择。
-
aspect-ratio不依赖定位，语义更清晰，内容可自然流式布局 -
padding-bottom方案中，子元素高度用百分比时，是相对父容器宽度而非高度——这点容易误判 - 混合使用也行：用
@supports (aspect-ratio: 1)做渐进增强
移动端头像场景下容易漏掉的细节
做头像容器时，光实现正方形还不够，真实项目常踩这几个坑：
- 小屏下
width: 100%导致头像过小（比如只有 28px），建议改用width: min(100%, 60px)或width: clamp(32px, 15%, 60px) - 圆角必须加在内容层（
.avatar），不能加在 wrapper 上——否则overflow: hidden和border-radius组合在某些安卓 WebView 中会失效 -
object-fit: cover要显式声明，否则头像拉伸变形；iOS Safari 对object-fit支持良好，无需前缀 - 如果头像来自用户上传，原始尺寸可能极大（如 4000×3000），记得加
max-width: 100%防止意外撑破布局
最麻烦的其实是语义与布局的权衡：padding-bottom 方案天然把内容脱离文档流，若后续要加浮动说明文字、状态 badge 或点击反馈动效，得额外处理定位层级和交互区域——这些细节，往往上线前才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
