談到margin就不得不提起到css盒模型，盒模型為外邊距+邊框+內(nèi)邊距+內(nèi)容區(qū)域，這里我們不談IE下的怪異模式冠场。
?margin即是盒模型的外邊距秆剪，并且透明赊淑，分隔開不同的盒模型。
1仅讽，margin重疊
margin在塊狀元素水平方向上是不存在重疊問題的陶缺，而在垂直方向上存在重疊問題。
? ?(1)洁灵，為什么存在重疊現(xiàn)象饱岸？
? 當(dāng)多個(gè)p標(biāo)簽設(shè)置margin:10px掺出，如果不存在margin重疊的話，表現(xiàn)如下:
? 當(dāng)存在margin重疊現(xiàn)象時(shí)苫费，表現(xiàn)如下:
?圖一圖二可以看出汤锨，margin重疊的話，每個(gè)p標(biāo)簽之間的間距就會(huì)相等百框，不會(huì)存在第一個(gè)和最后一個(gè)間距過小闲礼，看上去不協(xié)調(diào)的感覺。
(2)铐维，margin重疊的三種情況
第一種柬泽，父級(jí)與第一個(gè)或者最后一個(gè)子級(jí)元素外邊距重疊。
margin-top重疊成立條件
1嫁蛇，父級(jí)元素非塊級(jí)格式化上下文
2聂抢，父級(jí)元素?zé)oborder-top屬性
3，父級(jí)元素?zé)opadding-top屬性
4棠众，父級(jí)元素和第一個(gè)子級(jí)元素之間有inline分隔
margin-bottom重疊成立條件
1琳疏，父級(jí)元素非塊級(jí)格式化上下文
2，父級(jí)元素?zé)oborder-bottom屬性
3闸拿，父級(jí)元素?zé)opadding-bottom屬性
4空盼，父級(jí)元素和第一個(gè)子級(jí)元素之間有inline分隔
5，父元素?zé)o固定的高度設(shè)置
第二種新荤，空block元素標(biāo)簽外邊距重疊
1揽趾，本身沒有border屬性
2，本身沒有padding屬性
3苛骨，本身內(nèi)部無inline元素
4篱瞎，本身沒有高度屬性
第三種，多個(gè)p標(biāo)簽同樣的margin值
不需要清除margin重疊的影響
(3)痒芝，margin重疊的計(jì)算
1俐筋，正正取大值
重疊的部分根據(jù)最大的值為外邊距
2，正負(fù)值相加
重疊的部分相加后為外邊距
3严衬，負(fù)負(fù)取最小
重疊的值最小的那個(gè)為外邊距
2澄者，margin:auto的實(shí)用
?一個(gè)普通塊級(jí)元素，如div,在不設(shè)置寬度的情況下會(huì)占據(jù)一行请琳，margin在不考慮瀏覽器的情況下默認(rèn)可以看做是0粱挡，左右均沒有空隙，效果很簡單俄精，就不上圖了询筏。
? 當(dāng)對(duì)該div定寬的時(shí)候，div右側(cè)的空白間距就是margin的auto可支配的寬度竖慧，我們暫時(shí)稱可支配的寬度為W嫌套，此時(shí)對(duì)此div設(shè)置margin:auto時(shí)局冰，代碼如下：
#box{
width: 200px;
margin: auto;
background: #ddd;
}
<div id='box'></div>
效果如下:
?從圖三可以看出，水平方向上灌危，div已經(jīng)居中了康二，可支配的寬度W被平均的分配到左右兩側(cè)。
? 垂直方向上勇蝙，因?yàn)樵诓唤o父元素設(shè)置高度的情況下沫勿，不存在可支配的高度，所以在垂直方向上auto無效味混。
3产雹，margin無效
(1)，inline元素
? 內(nèi)聯(lián)元素span,i等標(biāo)簽再設(shè)置margin-top或者margin-bottom的時(shí)候是無效的翁锡，沒有作用掂僵。
(2)贪壳，table-cell
在table-cell中我們最好用padding來代替margin趟畏。
(3)蕉扮，絕對(duì)定位對(duì)立方向
例如：
.box{
position:absolute;
top:10%;
left:20%;
}
對(duì)于上面元素，他的margin-bottom和margin-right沒有效果角溃，因?yàn)?box由于有一個(gè)top值拷获，距離下部距離過大，設(shè)置margin-bottom過小的話是沒有反應(yīng)的减细，除非設(shè)置很大的值匆瓜。
(4)，浮動(dòng)元素
兩列布局未蝌，左側(cè)圖片浮動(dòng)驮吱，右側(cè)普通p標(biāo)簽包裹的文字，我們想讓圖片和文字之間有間距的萧吠，如果p標(biāo)簽margin-left過小的話左冬，右側(cè)就不會(huì)移動(dòng)。
4怎憋，margin的單位
margin單位有px,％又碌，當(dāng)他的單位為％的時(shí)候，如
.father{
? ?width:400px;
? ?height:500px;
}
.son{
? margin:50%;
}
此時(shí).son相當(dāng)于
.son{
? margin-top:200px;
? margin-left:200px;
? margin-right:200px;
? margin-bottom:200px;
}
簡而言之绊袋，百分比是以父級(jí)元素的寬度的百分比計(jì)算的。
當(dāng)div元素本身是絕對(duì)定位時(shí)铸鹰，margin百分比是根據(jù)第一個(gè)定位祖先元素（relative/absolute/fiexd）的寬度來確定的癌别。
5，margin的實(shí)用
(1)蹋笼，margin和absolute實(shí)現(xiàn)居中效果
.father{
position:relative;
width:100%;
height:400px;
}
.son{
position:absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
}
(2)展姐，margin實(shí)現(xiàn)增加容器空間
增加ul的樣式margin-right: -10px;
如圖五躁垛，我們讓一行l(wèi)i排列，往往都有一個(gè)margin值來調(diào)整間距圾笨，而到了最后一個(gè)往往被擠下去教馆，我們可以單獨(dú)設(shè)置最后一個(gè)li的margin值來調(diào)整。
這里我們可以給父元素一個(gè)margin-right:-10px擂达，margin改變?nèi)萜鞯恼紦?jù)尺寸(容器寬度不能是定值土铺，否則無效)，這樣就會(huì)如圖七所示板鬓。排列到一行了悲敷，而不需要單獨(dú)給最后一個(gè)或者第一個(gè)單獨(dú)寫margin。
另外俭令，只有當(dāng)父元素寬度為auto的時(shí)候才有效后德，因?yàn)樵O(shè)置固定的寬度值后margin就無法改變?nèi)萜髡紦?jù)內(nèi)容了。
(3)抄腔，margin實(shí)現(xiàn)左右兩列等高布局
代碼如下：
左右等高布局是用到margin負(fù)值和padding來填充margin負(fù)值隱藏掉的內(nèi)容瓢湃，并且需要左右元素均為浮動(dòng)。
