负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轴上的先后顺序有些不同，这和布局是有关系的。

总结

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

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

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

 应用：元素重叠