当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！
应用：布局自适应宽度
.box1 {
padding-bottom: 50%;
background: red;
}
.box2 {
float: left;
width: 50%;
background: blue;
padding-bottom: 50%;
position: relative;
}
img {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
<div class="box1">
<div class="box2">
<img src="https://img1.qunarzz.com/vc/29/31/b4/20fb7d1ad6e24362882319cbfb.jpg_750x388x92.jpg" alt="">
</div>
<div class="box2">
<img src="https://img1.qunarzz.com/vc/29/31/b4/20fb7d1ad6e24362882319cbfb.jpg_750x388x92.jpg" alt="">
</div>
<div class="box2">
<img src="https://img1.qunarzz.com/vc/29/31/b4/20fb7d1ad6e24362882319cbfb.jpg_750x388x92.jpg" alt="">
</div>
<div class="box2">
<img src="https://img1.qunarzz.com/vc/29/31/b4/20fb7d1ad6e24362882319cbfb.jpg_750x388x92.jpg" alt="">
</div>
</div>
////利用伪类也可以撑开容器大小
.box1 {
background: red;
width: 50%;
overflow: hidden; ///如果用下面用margin-top的话要在这里创建bfc，消除margin重叠
}
.box1:after {
content: '';
display: block;
margin-top: 100%;
}
