margin负值的妙用

最新推荐文章于 2023-03-28 19:58:11 发布

@大熊

最新推荐文章于 2023-03-28 19:58:11 发布

阅读量121

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_51558433/article/details/125632832

版权

场景

假设有一下场景（这里只考虑用float布局）：
有一个.wrapper的div容器宽度是1200px,里面有5个小的div，每个宽度是232px，margin-right:q10p效果图如下。因为.wrapper的宽度是1200px，5个div的宽度+mr是1210，又因为每个盒子都浮动，所以当一行放不下会折行。
在这里插入图片描述

解决方案

解决方法也有很多，(因为这里用到浮动，本来就是为了兼容低版本的浏览器，如果用:nth-child选择器，那么就不兼容低版本浏览器了)，这里说一个巧妙的方法。将5个div用一个.box的div元素包裹起来，设置这个.box的margin-right:-10px
在这里插入图片描述

原理

块级元素的包含块的宽度 = 块级元素宽度 + margin-left + margin-right
借用以上公式，（.box的宽度未设置，块级元素宽度默认是auto）我们可以知道.box的宽度是auto,这里是是父容器.wrapper的宽度，1200px，我们又设置了mr：-10px，所以.box宽度 = -1200px+-10px = 1210px,宽度都是正数，所以.box的宽度就是1210px，刚好够放下5个div
此时.box的宽度是1210px,超出父元素的宽度，会溢出，可以看到图中的红色背景溢出
使用margin-right是因为每个.item元素都设置了mr：10px，最后一个.item会往右边多10px，我们让.box也往右边移10px
那么有人可能会问，.box多了10个像素不会影响吗，这里要明白多的这10px实际上就是最后一个.item元素的右外边距，我们本来也不希望有，所以可以设置.wrapper的overflow:hidden

具体代码

    <style>
      .wrapper {
        width: 1200px;
        height: 800px;
        margin: 0 auto;
        /* overflow: hidden; */
        background-color: orange;
      }
      [class^="item"] {
        float: left;
        width: 232px;
        height: 232px;
        margin-right: 10px;
        background-color: purple;
      }
      .box {
        margin-right: -10px;
        background-color: #f00;
      }
      .box::after {
        content: "";
        display: table;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="box">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item4"></div>
        <div class="item5"></div>
      </div>
    </div>
  </body>