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

    

      
    
        

      
    
        

      
    
        

      
    
  

////利用伪类也可以撑开容器大小
    .box1 {
      background: red;
      width: 50%;
      overflow: hidden; ///如果用下面用margin-top的话要在这里创建bfc，消除margin重叠
    }
    .box1:after {
      content: '';
      display: block;
      margin-top: 100%;
    }