解决padding高度溢出和自适应高度的小方法

1.利用css3中的box-sizing: border-box，防止padding-top高度溢出。（相当于IE6的盒模型）

2.解决自适应高度，实现正方形子盒子。

<div class="wrapper">
        <div class="img"></div>
</div>

* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}
.wrapper {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
  padding-top: 60px;
  box-sizing: border-box; //相当于IE6盒模型
}
.wrapper .img {
  width: 50%;
  height: 0;
  padding-top: 50%;//父元素宽度的50%
  margin: 0 auto;
  border: 1px solid black;
}

效果：