負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軸上的前後順序有些不一樣，這和佈局是有關係的。

總結

若是元素沒有設置負邊距方向上的長度或寬度，負邊距會使負邊距方向上的長度或寬度增長。

應用： 多列等寬佈局/多行等高佈局

若是元素設置了負邊距方向上的長度或寬度，負邊距會使元素和相鄰元素重疊，這就是所謂的「塌陷」

應用：元素重疊