在做项目时， 我经常会遇到这样一种情况：在一个div里渲染一个正方形或圆形的物体， 这个物体是占满整个div的，而这个div的宽度会随着父元素的宽度变化而变化。为了让这个物体的效果不变形，必须保持div的长度和宽度一致，那么怎么做呢？
保持div长宽相等的方法：
div{
width: 100%;
padding-top: 100%; //padding-bottom: 100%;也可以
}上面的代码就可以令div的长宽相等。原理是什么呢？
我们先来看一下padding-top的取值：
| 取值 | 描述 |
| length | 规定以具体单位计的固定的上内边距值，比如像素、厘米等。默认值是 0px。 |
| % | 定义基于父元素宽度的百分比上内边距。 |
| inherit | 规定应该从父元素继承上内边距。 |
从上面的表中， 可以看到当padding-top的取值为百分比的时候，这个百分比是相对于父元素的宽度，因此当设置div的样式padding-top: 100%;也就将div的高度撑高到和宽度相等。
如果想要在这个div里面放子元素，可以将该div设置position:relative， 子元素设置为position:absulute; left:0; top:0 。如果想要子元素的宽高相等，只需要再设置子元素的样式为：width:100%; height;100%。
