如果说宽高自适应那么大家可能会想到
div{ width: 100%; height: 100% }
但是如果我要自适应的同时还要变成矩形呢？（高度和宽度相等而高度不能写死）
那就要实现如下的黑科技了
div{ width: 100% height: 0 padding-top: 100% /* padding 设置为100% 的时候会等于其容器的宽度 */ }
根据w3c 标准，当padding值为 100% 时 其相等于元素自身的宽度，所以把padding-top 或者 padding-bottom 为 100% 的时候，元素的高度便会被pading 撑开，而且！它的高度等于它自身的宽度！！ 黑科技啊
原文：http://www.cnblogs.com/stitchgogo/p/7380757.html