本文介绍了一种使用CSS的padding-bottom属性配合百分比值来创建自适应正方形的方法。通过将div元素的width和padding-bottom设置为相同百分比值，并将height设为0且隐藏溢出内容，可以确保在不同屏幕尺寸下，该div始终呈现为正方形。
padding-bottom为百分比时，是相对宽度取百分比值
div {
width: 20％;
padding-bottom: 20％;
height: 0;
overflow: hidden;
}
这样就能实现自适应的正方形
高度设置为0能保证盒子不被内容撑开
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
