总体思路：由于height是不固定的，所以不能直接使用height值。因此转换思路使用width值来实现正方形的height赋值。
所以理论上只要能够将宽度属性应用在高度属性的方法都可以。
方案一：CSS3 vw 单位
<div class="placeholder"></div>
.placeholder {
width: 50%;
height: 50vw;
background:green;
}
image.png
方案二：设置垂直方向的 padding 撑开容器
在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 父元素宽度 的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了：
.placeholder {
width: 50%;
padding-bottom: 50%;
background:green;
}
但有一个问题，当内容有高度时，会高度溢出：
image.png
显然这就不是一个正方形了。结局方案是：
.placeholder {
height: 0;
}
方案三：利用伪元素的 margin(padding)-top 撑开容器
这个其实和方案二思路一样，只不过使用伪元素副作用更小。
.placeholder {
width: 50%;
background:green;
}
.placeholder:after {
content: '';
display: block;
padding-top: 100%; /* margin 百分比相对父元素宽度计算 */
}
但它其实同样存在内容溢出的问题，这时候可以把内容放在另外的块中，使用绝对定位来消除空间占用。
