盒子模型之margin相關技巧！，盒子margin

盒子模型之margin相關技巧！，盒子margin

廢話不多說，直接進入主題，margin相關技巧。

1、設定元素水平置中：margin:x auto;

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

外邊距合并

　　指當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。

解決外邊距合并的方法：

　　a、使用這種特性。

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

　　c、將元素浮動或者定位(元素浮動或定位時，不會出現margin合并)

margin-top塌陷

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

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

　　b、外部盒子設定overflow:hidden

　　c、使用虛擬元素類：

　　.clearfix:before{

　　　　content:'';

　　　　dispaly:table;

　　}