【前端學習】-margin

1、margin描述
【概念】盒模型中的外邊距，即圍繞在元素邊框的空白區域，關於盒模型能夠參考https://segmentfault.com/a/11...
【屬性值】
上外邊距 margin-top:10px
右外邊距 margin-right:10px
下外邊距 margin-bottom:10px
左外邊距 margin-left:10px
固然，也縮寫爲 margin :top right bottom left（上右下左，即順時針方向）
指定三個值 margin:10px 20px 30px；分別指定了上 10px、右 20px 、下 30px，即最後左邊的間距默認是0；
指定兩個值 margin:10px 20px；分別指定了上下 10px、左右20px
指定一個值 margin:10px；指定上下左右都是10px。
【屬性單位】接受任何長度單位(px/em/rem等），auto，百分比。

2、利用margin:0 auto實現塊級元素水平居中

3、屬性單位爲%
水平方向使用%，距離爲父元素寬度的百分比。以下圖所示，父元素寬度是500px。子元素margin-left設置爲10%，渲染以後爲50px

垂直方向使用%，距離不是父元素高度的百分比，也是父元素寬度的百分比。以下圖所示，父元素寬度是500px。子元素margin-top設置爲10%，渲染以後爲50px

4、margin摺疊
1.相鄰元素水平方向不合並，兩個元素的距離等於兩個元素的外邊距之和

2.相鄰元素垂直方向
margin定義的是與其餘元素的最小間距。
規則：margin都爲正數，則取最大值；
margin中一正一負，則取二者之和
margin中都是負數，則取最小值

3.父子元素垂直方向
以下圖所示，子元素設置margin，緊貼父元素上邊，切父元素設置了margin，則會合並，合併以後的值爲二者中的大值

4.子元素穿透父元素
以下圖所示，子元素設置margin，緊貼父元素上邊，則會致使穿透，看上去是父元素這是了margin-top

解決方案：
父元素設置padding-top:1px 或者border:1px solid transparent
造成新的BFC，父元素或者子元素設置float，postion，overflow:hidden(我通常比較喜歡設置overflow:hidden)
以下圖所示，設置父元素上述屬性，便可避免穿透

4、注意點

1.浮動元素及inline元素不會發生重疊，包括他的子元素。
緣由：a.由於margin摺疊只會發生在塊級元素；浮動元素脫離了正常流，與其餘元素不處於同一個流。

b.inline-block或者浮動元素的造成了一個新的BFC，與子元素不在一個BFC因此不會重疊；