今天ui姐姐讓我給她做這樣個(gè)圖
image.png
這是三個(gè)正方形并列一排何暇，我們都知道容客，寬度可以自適應(yīng)，但是高度不行住涉。
首先我們說下1個(gè)正方形的解決辦法
在 CSS 盒模型中，一個(gè)比較容易被忽略的就是 margin, padding 的百分比數(shù)值計(jì)算钠绍。按照規(guī)定舆声，margin, padding 的百分比數(shù)值是相對 父元素 的寬度計(jì)算的。由此可以發(fā)現(xiàn)只需將元素垂直方向的一個(gè) padding 值設(shè)定為與 width 相同的百分比就可以制作出自適應(yīng)正方形了：
.placeholder {
width: 100%;
padding-bottom: 100%;
}
padding的百分比是按照寬度來計(jì)算的柳爽。
但是padding是不包含盒子內(nèi)容的媳握，所以我們把盒子高度設(shè)置為0
.placeholder {
height: 0;
}
這時(shí)就輕松的完成了。
這時(shí)我們來看3個(gè)并列的正方形
但是這時(shí)我們發(fā)現(xiàn)寬高差了幾像素
image.png
是因?yàn)槲沂褂昧薴lex分成三份磷脯，這時(shí)我的padding是按照父級的寬度來計(jì)算33.3%蛾找；但是我們忘了減間距的距離
image.png
這樣就成功了
