画一个正方形很容易，画一个响应式的正方形，怎么画？
无论 width 和 height 怎么变化，永远是一个正方形。width 和 height 肯定不能写死了。
div 的内容宽度和高度就是 div 的 width 和 height，如果不写 height，默认 height 为0。padding-top 撑起 div，对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的是父容器的宽度。当我们设置padding-top 为 100%时，就是父容器的宽度，子元素不写 width 时，就是跟父元素的 width 一样。这时就画成了一个正方形。无论怎么变化，都是一个正方形。
1 | <style> |
2 | div{ |
3 | border: 1px solid red; |
4 | padding-top: 100%; |
5 | background:red; |
6 | } |
7 | </style> |
