跳转到主内容
极星编程网：以代码为星，赴技术山海！
📁 网站地图

如何制作CSS自适应比例的正方形_利用::before伪元素的padding顶高

苏承栈
苏承栈
• 👁 0人浏览过
能做出响应式正方形，因::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。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 立即学习 “ 前端免费学习笔记（深入） ”； 排查要点： 父容器是否被
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%
会失去计算基准。

相关文章