css如何搞正方形

如何搞正方形

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

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

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

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