什么是外邊距重疊，重疊的結果是什么
小課堂【成都第142期】 ??分享人：張珺琢
1.背景介紹
外邊距重疊是指兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界重合在一起而形成一個單一邊界,外邊距的重疊只產生在普通流的垂直相鄰邊界間。
如果都是正邊界，邊界寬度是相鄰邊界寬度中最大的值。如果出現負邊界，則在最大的正邊界中減去絕對值最大的負邊界。如果沒有正邊界，則從零中減去絕對值最大的負邊界。
2.知識剖析
當一個元素出現在另一個元素上面時，第一個元素的底邊界與第二個元素的頂邊界發生疊加
一般情況：
3.常見問題
外邊距重疊的意義？
外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。當我們上下排列一系列規則的塊級元素（如段落P）時，那么塊元素之間因為外邊距重疊的存在，段落之間就不會產生雙倍的距離。
解決外邊距重疊？
4.解決方案
外層元素padding代替
內層元素透明邊框 border:1px solid transparent;
內層元素絕對定位 postion:absolute:
外層元素 overflow:hidden;
內層元素 加float:left;或display:inline-block;
內層元素padding:1px;
5.編碼實戰
對黃色盒子設置overflow：hidden；或者對橙色盒子設置絕對定位。或設置浮動，等等。很多種方法。
6.拓展思考
利用BFC是否能避免垂直方向margin重疊？
BFC的兩條屬性：
1內部的Box會在垂直方向，一個接一個地放置。
2Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊。
由此：
當垂直的兩個box屬于不同BFC時，可以避免重疊。
感謝收看。
http://www.jnshu.com/login/1/31050617
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷?！薄?/b>
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導?？靵砼c我一起學習吧 ！
