CSS外邊距屬性，深刻理解margin

margin

See the Pen margin by wmui (@wmui) on CodePen.

該屬性用於設置元素的外邊距，外邊距是透明的，默認值0。這是一個簡寫屬性，屬性值最多爲4個，例如margin: 10px 15px 10px 15px，分別表示上外邊距、右外邊距、下外邊距、左外邊距。屬性值也能夠是3個，例如margin: 10px 15px 10px，表示上外邊距、左右外邊距、下外邊距。屬性值能夠爲2個，例如margin: 10px 15px，表示上下外邊距、左右外邊距。屬性值能夠爲1個，例如margin: 10px，表示四邊外邊距。外邊距也能夠單獨設置，margin-top上外邊距，margin-right右外邊距，margin-bottom下外邊距，margin-left作外邊距。屬性值能夠是auto，瀏覽器自動計算外邊距，塊級元素會水平居中顯示，如例1，至於爲什麼水平方向居中，垂直方向未居中，這個下面細說。屬性值能夠是百分比，百分比是基於父元素的寬度計算的，在例2中爲子元素設置了margin: 50%。屬性值能夠是CSS長度單位，值能夠是負值。屬性值能夠是inherit。

外邊距疊加

說明：普通文檔流中，垂直排列的兩個塊級盒子（非父子），他們的上外邊距或者下外邊距會出現疊加，會以二者中外邊距較大的那個爲準，左右外邊距不會疊加。

狀況一：上面的例3和例4演示了這個現象，例3margin: 50px，例4margin: 30px，最後兩個盒子之間的距離爲50px，要想發生疊加須要知足如下條件：

1.只發生在塊級元素且是普通流（inline-block元素不會疊加）
2.只發生在垂直方向上

狀況二：上面的例2中父子嵌套的兩個盒子，父元素和第一個子元素或最後一個子元素也會發生疊加效果，在例2中大盒子的外邊距默認爲0，而裏面的小盒子上外邊距50%（即100px），最終兩個盒子的上外邊距都是100px，父子嵌套的盒子須要知足如下條件纔會發生外邊距疊加：

1. 父元素非BFC元素
   
2. 父元素沒有padding-top值
   
3. 父元素沒有border-top值
   
4. 父元素和第一個子元素間沒有inline元素間隔

細心觀察發現下外邊距沒有發生疊加，margin-bottom發生疊加須要知足另外一個條件，上面的第四條改成：父元素和最後一個子元素之間沒有inline元素分隔，以及父元素沒有height、min-height、max-height限制。

狀況三：若是一個盒子沒有任何內容也沒有高度，這個盒子真身也會出現外邊距疊加，例如：

<div style="margin: 30px 0;"></div>

這個盒子的上下邊距最終是30px，須要知足如下條件空盒子纔會發生疊加：

1.沒有border
2.沒有padding
3.沒有內容和高度

margin: auto沒法實現垂直居中

拿例1先說，爲何能實現水平居中？這是由於子盒子是一個塊級元素，它的寬度默認是等於父盒子的寬度，因而子盒子和父盒子之間就有了聯繫，當給子盒子固定寬度後，margin: auto能平分剩餘空間

在垂直方向上，子盒子的初始高度是不肯定的，它是根據內容的高度撐開的，這樣父盒子和子盒子就沒法創建聯繫，因此margin: auto在垂直方向上會被重置爲0，初始高度不等於設置的高度。

margin: auto沒法實現圖片水平居中

相似塊級元素沒法實現垂直居中的緣由，圖片的寬度默認等於自身，沒法和父盒子創建聯繫，因此左右的外邊距會被重置爲0。解決方法，給圖片設置display: block讓圖片容器佔滿父盒子

行內元素垂直外邊距無效

對於行內元素（inline），垂直方向上的排列布局是經過line-height, vertical-align來影響的，margin值在垂直方向不會影響他們，可是水平方向但是有效的。還有一些元素，如<thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <colgroup>這些和表格相關的元素設置margin是無效的

理解BFC

EFC(Block Formatting Content)，塊級格式化上下文，可簡單理解爲塊級盒子在頁面中的一塊渲染區域，這塊區域能夠看作一個獨立的容器，容器裏面的元素不會影響到外邊的元素，網頁佈局常見的文檔流有普通文檔流、浮動流和定位流三種，FC就是普通流。

BFC觸發條件

1. 元素的float值不爲none
2. overflow值不爲visible
3. display值爲inline-block、table-cell、table-caption
4. position值爲absolute、fixed

知足上面的任一個條件均可觸發BFC

BFC的做用

See the Pen BFC by wmui (@wmui) on CodePen.

做用1：觸發元素的BFC，使該元素不被浮動元素覆蓋

例1中黃色的盒子浮動了，致使遮蓋住了普通流中的紅色盒子，此時只要觸發紅色盒子的BFC，黃色盒子就不會覆蓋紅色盒子了。

做用2：包含浮動元素

在例2中，紅色父盒子在普通流中，黃色子盒子浮動了，父盒子沒法包圍子盒子，觸發父盒子的BFC，使父盒子包圍子盒子

做用3： 阻止外邊距疊加

在例3中是常見的外邊距疊加狀況，觸發任一個盒子的BFC，便可阻止外邊距疊加，但並非只有觸發BFC才能阻止疊加。

有一種狀況有些特殊，當使用overflow: hidden阻止疊加時，須要爲子盒子的父元素設置這一屬性，例如：

<div style="margin-bottom: 20px;">TEST</div>
 <div style="overflow: hidden">
  <div style="margin-bottom: 20px;">TEST</div>
</div>

阻止外邊距疊加

除了觸發BFC能夠阻止外邊距疊加，還有其餘方法，上面說過觸發外邊距疊加須要知足一些條件，我只要違背那些條件天然就能夠阻止外邊距疊加了。對於父子嵌套疊加，我能夠爲父元素設置border或padding，也能夠添加一個行內元素做爲第一個子元素（必需要有內容），還能夠觸發子元素或父元素的BFC。對於非父子嵌套的外邊距疊加，這實際上是一種正常的佈局效果，若是非要阻止疊加，那就觸發BFC，設置border或padding是不能阻止其疊加的，只有觸發BFC