margin/padding 百分比·

当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%;
    }