今天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