margin相關技巧以及margin-top塌陷問題

使用相關技巧

1、設定元素水準居中： margin: 0 auto;

2、負邊距+定位：水準垂直居中

一個絕對定位的盒子， 利用 父級盒子的 50%， 然後 往左(上) 走 自己寬度的一半 ，可以實作盒子水準垂直居中。

3、margin負值讓元素位移及邊框合并

外邊距合并

外邊距合并指的是，當兩個垂直外邊距相遇時，它們将形成一個外邊距。合并後的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。解決方法如下：

1、使用這種特性

2、設定一邊的外邊距，一般設定margin-top

3、将元素浮動或者定位

（1）相鄰塊元素垂直外邊距的合并

當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。

（2）嵌套塊元素垂直外邊距的合并

對于兩個嵌套關系的塊元素，如果父元素沒有上内邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合并，合并後的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合并。

margin-top 塌陷

在兩個盒子嵌套時候，内部的盒子設定的margin-top會加到外邊的盒子上，導緻内部的盒子margin-top設定失敗，解決方法如下：

1、外部盒子設定一個邊框

2、外部盒子設定 overflow:hidden 

3、使用僞元素類：（使用僞元素類，其實就是相當于建立一個外邊框）

.clearfix:before{
content: '';
display:table;
}