移动端自适应正方形

今天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
这样就成功了