css通过width和padding设置元素高度

做html页面经常想要把元素宽度设置百分比，以适应设备的宽度，这好办，但如果我们的元素想要正方形的呢？想要高是宽的2倍呢，问题就来了。怎么设置呢？先来段css设置：

#square-box{
width:100%;
height:0;
padding-bottom:100%;
}

这三行样式就能把我们的元素设置为随屏幕尺寸适应的正方形。那自己试试padding-bottom为200%吧。