今天ui姐姐让我给她做这样个图
image.png
这是三个正方形并列一排，我们都知道，宽度可以自适应，但是高度不行。
首先我们说下1个正方形的解决办法
在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 父元素 的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了：
.placeholder {
width: 100%;
padding-bottom: 100%;
}
padding的百分比是按照宽度来计算的。
但是padding是不包含盒子内容的，所以我们把盒子高度设置为0
.placeholder {
height: 0;
}
这时就轻松的完成了。
这时我们来看3个并列的正方形
但是这时我们发现宽高差了几像素
image.png
是因为我使用了flex分成三份，这时我的padding是按照父级的宽度来计算33.3%；但是我们忘了减间距的距离
image.png
这样就成功了
网友评论