上下margin重疊傳遞問題

　　我發現強迫症真的是我一個大病。。。每次都非得把全部狀況都實驗出來不可。。。BUT!!!!!!!!!悲催的是，這麼多狀況我根本記不住。。。仍是要在寫代碼的時候不斷出錯再排錯~受不了本身了！不過仍是把這部分總結到這裏啦~

下面的幾個部分應該是margin重疊問題的全部狀況了：

一、兩個普通元素上下的margin會合併爲一個margin，哪一個大選哪一個！

    兩個浮動元素不會出現margin傳遞的問題，依然是上面元素的margin-bottom和下面元素的margin-top相加做爲二者之間的margin值。

二、兩個元素若是是包含關係，父元素和子元素上下margin值也會合並

當父元素不加邊框， 不設置寬高，即父級沒有觸發haslayout時	IE六、7和標準瀏覽器下，均會發生margin傳遞問題 子元素和父元素的高度相同（子元素的top將和父元素的top在一條直線上，bottom將和父元素的bottom在一條直線上） 而父元素則選擇二者之間大的數值做爲父元素的margin-top值和margin-bottom值！！！ 子元素的margin-left和margin-right值依然存在
當父元素不加邊框， 可是，設置寬或高或zoom：1；即父級加能夠觸發haslayout的屬性時	標準瀏覽器下，會發生margin傳遞 可是在IE六、7下則不會發生margin傳遞（即子元素的margin就是相對於父元素的，不會傳遞給父級）
當父級加邊框，而且父級沒有觸發haslayout時	標準瀏覽器下，不會發生margin傳遞 IE六、7下，子元素的margin完全消失！
當父級加邊框，而且父級觸發haslayout（即加width或height或zoom：1）時，	IE六、7和標準瀏覽器下，都不會發生margin傳遞！！！

對於IE6、7來講：

　　即只要觸發haslayout，無論給不給父元素加邊框，無論標準瀏覽器會不會發生margin傳遞，IE6、7下都不會發生margin傳遞！！！

而對於標準瀏覽器來講：

　　只有加邊框才能避免margin傳遞！！！

　　給父元素添加邊框，則子元素和父元素之間的margin就有分割線了，此時將不會發生合併現象了！若是給子元素添加邊框二者的margin值仍是沒有被分開，因此依然還會發生重疊現象！

 

 

　　若是這裏父元素裏包含了多個塊子元素，則每一個子元素之間知足上下margin重疊，選擇二者較大的margin做爲二者之間的margin，第一個子元素的top和父元素重疊（左圖上面白色距瀏覽器頂的白色區域便是），最後一個子元素的bottom和父元素重疊。IE六、7和標準瀏覽器顯示效果均如左圖。

　　此時，若是兩個塊元素是浮動元素，那麼，那麼就不存在子元素和父元素的margin傳遞狀況，此時，上下的margin值則是二者之間的各自margin值相加！標準瀏覽器顯示以下圖中，IE6顯示以下圖右。但爲何顯示有差別呢？由於，額滴神啊！一波未平一波又起！塊狀元素和橫向margin和浮動三者引起了IE6的新的兼容性問題——雙邊距bug（注意IE7沒有雙邊距bug！！！！）

由此

　　實踐時，首先必定要給父元素加觸發haslyout的屬性！這一條保證了在IE六、7下不出現margin傳遞問題和margin值消失問題；

　　而後，考慮在標準瀏覽器下，給子元素加浮動能夠解決沒有border時出現的margin傳遞問題，可是此時加浮動後會形成IE6的雙邊距bug，

　　因此咱們實踐時儘可能將浮動的塊狀元素的margin換爲padding，若是實在不能換就給該元素加display:inline;！

       

三、兩個Div（A、B）上下之間沒有margin值，可是A中有子元素有margin，這時該子元素的margin值會傳遞到二者間，會使A、B兩個元素之間填充上margin，僅限垂直方向！！！

 

對於這個問題，大概就是這樣啦，其實也很簡單，只是我把全部的狀況列出來了，其實綜合起來就是上面總結部分的內容。

我感受這個margin傳遞和重疊都是由於二者的margin值之間沒有邊框或者是padding將margin這一空白區域隔開！！！！