负margin的几个问题

      此文持续更新，发现有趣的东西
      负边距是一个比较奇葩的东西，为何说它奇葩呢？padding在border的里面；margin在border的外面。咱们能够把”border“比做房子的围墙”，margin“比做房子外面的篱笆。但是这个篱笆的宽度恰恰能够是个负值。

      好了，闲话少叙，放代码！

<div class="parent">
    <div class="child1">对照</div>
    <div class="child2">测试</div>
</div>

.parent{width: 400px;height: 100px;border:2px solid green;}
.child1{background: #ccc;height: 50px;}
.child2{background: #eee;height: 50px;border: 5px solid red;box-sizing:border-box;margin-right: -50px;width:400px;}

      child1做为对照，child2做为测试对象。
      以上代码在html文件中测试的结果是child1继承父元素宽度，而child2也继承父元素的宽度。

      图1

      当咱们去掉child2的css代码中的“width：400px”后，child2居然超出了parent的范围！也就是说它把负margin的绝对值，加到了自身的内容中，这无疑增大了元素自己的宽度。

      图2

好了，咱们总结如下:
      元素设定宽度：负边距对元素的宽度没有影响
      元素未设定宽度：负边距增大元素的宽度（注意是元素自己的宽度！）以致于超出容器。
      好了，第一部分的验证结束，至于应用举例，网上的例子不少，咱们只要知晓其中巧妙，大可放心应用。那再在来探讨一下，负边距对相邻元素的影响是怎样的呢？
      答案是没有空间上的影响（有遮挡效果，这是相对产生的结果）。

      图3
此文系本人原创，若有不严谨的地方还请指正。

---

第一次更新，回看时候发现我并无对内容上的影响作相应的测试，此次补上

      图4

      图5

内容上依然没有空间上的影响，只是z轴上的前后顺序有些不一样，这和布局是有关系的。

总结

若是元素没有设置负边距方向上的长度或宽度，负边距会使负边距方向上的长度或宽度增长。

应用： 多列等宽布局/多行等高布局

若是元素设置了负边距方向上的长度或宽度，负边距会使元素和相邻元素重叠，这就是所谓的“塌陷”

应用：元素重叠