總體思路：由于height是不固定的，所以不能直接使用height值致扯。因此轉(zhuǎn)換思路使用width值來實(shí)現(xiàn)正方形的height賦值。
所以理論上只要能夠?qū)挾葘傩詰?yīng)用在高度屬性的方法都可以错妖。
方案一：CSS3 vw 單位
<div class="placeholder"></div>
.placeholder {
width: 50%;
height: 50vw;
background:green;
}
image.png
方案二：設(shè)置垂直方向的 padding 撐開容器
在 CSS 盒模型中揭保，一個(gè)比較容易被忽略的就是 margin, padding 的百分比數(shù)值計(jì)算。按照規(guī)定，margin, padding 的百分比數(shù)值是相對(duì) 父元素寬度 的寬度計(jì)算的鹃骂。由此可以發(fā)現(xiàn)只需將元素垂直方向的一個(gè) padding 值設(shè)定為與 width 相同的百分比就可以制作出自適應(yīng)正方形了：
.placeholder {
width: 50%;
padding-bottom: 50%;
background:green;
}
但有一個(gè)問題台盯，當(dāng)內(nèi)容有高度時(shí)，會(huì)高度溢出：
image.png
顯然這就不是一個(gè)正方形了畏线。結(jié)局方案是：
.placeholder {
height: 0;
}
方案三：利用偽元素的 margin(padding)-top 撐開容器
這個(gè)其實(shí)和方案二思路一樣静盅，只不過使用偽元素副作用更小。
.placeholder {
width: 50%;
background:green;
}
.placeholder:after {
content: '';
display: block;
padding-top: 100%; /* margin 百分比相對(duì)父元素寬度計(jì)算 */
}
但它其實(shí)同樣存在內(nèi)容溢出的問題寝殴，這時(shí)候可以把內(nèi)容放在另外的塊中蒿叠，使用絕對(duì)定位來消除空間占用。
