我發現強迫症真的是我一個大病。。。每次都非得把所有情況都實驗出來不可。。。BUT!!!!!!!!!悲催的是,這么多情況我根本記不住。。。還是要在寫代碼的時候不斷出錯再排錯~受不了自己了!不過還是把這部分總結到這里啦~
下面的幾個部分應該是margin重疊問題的所有情況了:
1、兩個普通元素上下的margin會合並為一個margin,哪個大選哪個!
兩個浮動元素不會出現margin傳遞的問題,依然是上面元素的margin-bottom和下面元素的margin-top相加作為兩者之間的margin值。
2、兩個元素如果是包含關系,父元素和子元素上下margin值也會合並
當父元素不加邊框, 不設置寬高,即父級沒有觸發haslayout時 |
IE6、7和標准瀏覽器下,均會發生margin傳遞問題 子元素和父元素的高度相同(子元素的top將和父元素的top在一條直線上,bottom將和父元素的bottom在一條直線上) 而父元素則選擇兩者之間大的數值作為父元素的margin-top值和margin-bottom值!!! 子元素的margin-left和margin-right值依然存在
|
當父元素不加邊框, 但是,設置寬或高或zoom:1;即父級加可以觸發haslayout的屬性時 |
標准瀏覽器下,會發生margin傳遞 但是在IE6、7下則不會發生margin傳遞(即子元素的margin就是相對於父元素的,不會傳遞給父級) |
當父級加邊框,並且父級沒有觸發haslayout時 |
標准瀏覽器下,不會發生margin傳遞 IE6、7下,子元素的margin徹底消失! |
當父級加邊框,並且父級觸發haslayout(即加width或height或zoom:1)時, |
IE6、7和標准瀏覽器下,都不會發生margin傳遞!!! |
對於IE6、7來說:
即只要觸發haslayout,不管給不給父元素加邊框,不管標准瀏覽器會不會發生margin傳遞,IE6、7下都不會發生margin傳遞!!!
而對於標准瀏覽器來說:
只有加邊框才能避免margin傳遞!!!
給父元素添加邊框,則子元素和父元素之間的margin就有分割線了,此時將不會發生合並現象了!如果給子元素添加邊框兩者的margin值還是沒有被分開,所以依然還會發生重疊現象!
如果這里父元素里包含了多個塊子元素,則每個子元素之間滿足上下margin重疊,選擇兩者較大的margin作為兩者之間的margin,第一個子元素的top和父元素重疊(左圖上面白色距瀏覽器頂的白色區域即是),最后一個子元素的bottom和父元素重疊。IE6、7和標准瀏覽器顯示效果均如左圖。
此時,如果兩個塊元素是浮動元素,那么,那么就不存在子元素和父元素的margin傳遞情況,此時,上下的margin值則是兩者之間的各自margin值相加!標准瀏覽器顯示如下圖中,IE6顯示如下圖右。但為什么顯示有差異呢?因為,額滴神啊!一波未平一波又起!塊狀元素和橫向margin和浮動三者引發了IE6的新的兼容性問題——雙邊距bug(注意IE7沒有雙邊距bug!!!!)
由此
實踐時,首先一定要給父元素加觸發haslyout的屬性!這一條保證了在IE6、7下不出現margin傳遞問題和margin值消失問題;
然后,考慮在標准瀏覽器下,給子元素加浮動可以解決沒有border時出現的margin傳遞問題,但是此時加浮動后會造成IE6的雙邊距bug,
所以我們實踐時盡量將浮動的塊狀元素的margin換為padding,如果實在不能換就給該元素加display:inline;!
3、兩個Div(A、B)上下之間沒有margin值,但是A中有子元素有margin,這時該子元素的margin值會傳遞到兩者間,會使A、B兩個元素之間填充上margin,僅限垂直方向!!!
對於這個問題,大概就是這樣啦,其實也很簡單,只是我把所有的情況列出來了,其實綜合起來就是上面總結部分的內容。
我感覺這個margin傳遞和重疊都是因為兩者的margin值之間沒有邊框或者是padding將margin這一空白區域隔開!!!!