前言
margin是盒模型幾個屬性中一個非常特殊的屬性。簡單舉幾個例子：只有margin不顯示當前元素背景，只有margin可以設置為負值，margin和寬高支持auto，以及margin具有非常奇怪的重疊特性。
重疊
margin重疊又叫margin合並，發生這種情況有兩個前提
1、只發生在block元素上(不包括float、absolute、inline-block元素)
2、只發生在垂直方向上(不考慮writing-mode)
【相鄰的兄弟元素】
margin重疊效果展示：
item1 和 item2 是相鄰的塊級元素，我們可以看到垂直方向上，發生了margin重疊效果
具體的疊加規則是什么？
正正取大值、正負值相加、負負最負值
【margin傳遞】
父級元素和第一個或最后一個子元素，父子級的margin重疊又叫margin傳遞
條件
相對比相鄰兄弟元素margin重疊來說，父子級margin重疊需要滿足以下幾個條件(以margin-top重疊為例)：
a、父元素不是BFC元素
b、父元素沒有padding-top值
c、父元素沒有border-top值
d、父元素和第一個子元素之間沒有inline元素分隔
如果是父子級的margin-bottom重疊，第d條改為父元素和最后一個子元素之間沒有inline元素分隔，以及還需要滿足父元素沒有height、min-height、max-height限制
效果展示：
在item1上面添加一個margin-top:20px;時父元素跟着一起下來了20px，這種現象就叫做“margin傳遞”。我們通過在父元素上添加一些屬性就可以破壞margin傳遞，下面是實際案例，可以動手點點
【空的block元素】
先看下HTML結構
<div class="case-main">
<div class="case-item"></div>
</div>
效果展示：
第一步：我們選擇了margin:20px 0; 此時你會發現你一點變化都沒有，為什么父元素沒有被撐開？
第二步：我們再選擇父元素的overflow:hidden，你會發現這時候可以看到父元素的淺藍色背景色了，但是明明是上下margin都是20px一起應該是40px，可是父元素高度只有20px。
第一步解釋：
父元素如果不是BFC的情況下，子元素margin-top margin-bottom 是不會撐開父元素的高度。
第二步解釋：則是發生了margin重疊，同樣地，空block元素發生margin重疊也需要滿足一些條件
a、子元素(case-item)沒有border值
b、子元素(case-item)沒有padding值
c、里面沒有inline元素
d、子元素(case-item)沒有height或min-height
效果展示：
-webkit-margin-collapse
-webkit-margin-collapse: <collapse>(默認重疊) | <discard>(取消) | <separate>(分隔)
效果展示：
auto
只有width/height和margin可以設置auto。
【為什么margin:auto無法實現垂直居中】
水平方向可以居中是因為塊級元素的寬度默認是撐滿父級元素的，如果給寬度設置一個固定值，而左右margin設置為auto，則可以平分剩余空間
垂直方向不可以居中是因為塊級元素的高度默認是內容高度，與父級元素的高度並沒有直接的關系，而上下margin設置為auto，則被重置為0
【為什么圖片使用margin:auto不能水平居中】
圖片無法水平居中，類似於塊級元素無法垂直居中。因為圖片的寬度width默認是自身寬度，與父元素的寬度沒有直接關系。左右margin設置為auto，會被重置為0
所以，圖片要水平居中，需要設置為display:block元素
【實現垂直居中】
使用margin:auto實現垂直居中，有以下兩種方法
1、使用writing-mode:vertical-lr;
writing-mode代表頁面流方向，默認是水平方向。改為垂直方向后，可實現垂直居中，但水平不居中了
2、將元素變為絕對定位元素(IE7-瀏覽器不支持)
將元素變為絕對定位元素后，設置top:0;bottom:0;left:0;right:0;，使絕對定位元素與定位父級的高度和寬度有了直接的聯系。再設置margin:auto;，使margin-top，margin-bottom，margin-left,margin-right平分剩余空間，達到水平垂直居中的效果
效果展示：
小結
通過本文我們學習了：
margin重疊的幾種情況(塊級元素之間，父子之間的margin傳遞)
-webkit-margin-collapse設置是否重疊的新屬性
margin auto的一些情況，例如塊級元素margin:auto;為什么無法垂直居中，圖片margin:auto為什么無法水平居中
最后通過position:absolute配合margin:auto;實現水平垂直居中顯示