css如何搞正方形

如何搞正方形

总有需求会要有正方形的框。同时宽度是可以自适应的。
但是好像没有什么属性可以设置高度等于宽度这样的css。

在技术群问了下，大牛立马给我弄了个，http://code.w3ctech.com/detail/2208

得到了很好的启发，结合自己的实际应用，完善了下。看demo （内有分析）
http://liyatang.github.io/demo/css/square.html

为啥能够使用padding-bottom: 100%;呢。
因为w3c说百分比是依据父元素的width计算的。