方案1：CSS3 vw單位
CSS3 中新增了一組相對于可視區(qū)域百分比的長度單位 vw, vh, vmin, vmax些阅，其中 vw是相對于視口寬度百分比的單位兽掰，1vw = 1% viewport width嘉抒， vh 是相對于視口高度百分比的單位提完，1vh = 1% viewport height百新；vmin是相對當(dāng)前視口寬高中 較小的一個的百分比單位珊燎，同理 vmax是相對當(dāng)前視口寬高中 較大
利用 vw單位，我們可以很方便做出自適應(yīng)的正方形：
<div class="placeholder"></div>
.placeholder {
width: 100%;
height: 100vw;
}
方案二：設(shè)置垂直方向的 padding 撐開容器
在 CSS 盒模型中姑廉，一個比較容易被忽略的就是 margin, padding的百分比數(shù)值計算缺亮。按照規(guī)定，margin, padding的百分比數(shù)值是相對 父元素寬度的寬度計算的。由此可以發(fā)現(xiàn)只需將元素垂直方向的一個 padding值設(shè)定為與 width相同的百分比就可以制作出自適應(yīng)正方形了：
.placeholder {
width: 100%;
height:0;
padding-bottom: 100%;
}
方案三：利用偽元素的 margin(padding)-top 撐開容器
在方案二中萌踱，我們利用百分比數(shù)值的 padding-bottom
屬性撐開容器內(nèi)部空間葵礼，但是這樣做會導(dǎo)致在元素上設(shè)置的 max-height
屬性失效。而失效的原因是 max-height 屬性只限制于 height并鸵，也就是只會對元素的 content height 起作用鸳粉。那么我們是不是能用一個子元素?fù)伍_ content 部分的高度，從而使 max-height
屬性生效呢园担？我們來試試：
.placeholder {
width: 100%;
}
.placeholder:after {
content: '';
display: block;
margin-top: 100%; /* margin 百分比相對父元素寬度計算 */}
一刷新頁面届谈，啊嘞？怎么什么也沒有弯汰？
這里就涉及到 margin collapse 的概念了艰山，由于容器與偽元素在垂直方向發(fā)生了外邊距折疊，所以我們想象中的撐開父元素高度并沒有出現(xiàn)咏闪。而應(yīng)對的方法是在父元素上觸發(fā) BFC
.placeholder { overflow: hidden;}
你說元素內(nèi)部添加內(nèi)容時高度會溢出曙搬？對于這樣的情況，可以將內(nèi)容放到獨(dú)立的內(nèi)容塊中鸽嫂，利用絕對定位消除空間占用纵装。
結(jié)語
以上就是我目前所想到的三種制作自適應(yīng)正方形的方案，拋去 CSS3 中的視口相對單位据某，主要利用到 margin, padding 的百分比數(shù)值相對父元素寬度的寬度計算得出
來制作寬高相等搂擦、且相對視口寬度自適應(yīng)的正方形。如果需求是制作相對視口高度自適應(yīng)的正方形哗脖，估計就只能使用 vh
單位了吧~
