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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 11,908评论 1 91
  • 本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/...
    新篇章阅读 129评论 0 0
  • 罗嗦的开头 早上感觉不对劲,一睁眼就发现媳妇趴在我身上,她告诉我她的手机找不到了问我看没看到。我去啊~我刚睡醒谁特...
    培佑哥阅读 299评论 0 0
  • 走在路上哼着歌阅读 56评论 0 0
  • 一天,有一只海豚在大海里唱歌,狮子听见了说:“你就是大海里面的大王吗”?海豚说:“你是陆地上的王吗?”狮...
    王月杰作者阅读 184评论 0 0