1. 程式人生 > >margin塌陷問題:父元素與子元素之間的margin-top問題

margin塌陷問題:父元素與子元素之間的margin-top問題

1.邊界疊加有幾種情況:

元素的頂邊界與前面元素的底邊界發生疊加;
元素的頂邊界與父元素的頂邊界發生疊加;
空元素的頂邊界與底邊界發生疊加;
空元素中已經疊加的邊界與另一個空元素的邊界發生疊加。
2.解決方案:
(1)為外層元素新增padding-top進行模擬;
(2)新增透明邊框border:1px solid transparent;;
(3)為外層或內層元素新增絕對定位postion:absolute;;
(4)為外層div新增overflow:hidden;;
(5)為內層div新增float:left;display:inline;;
(6)外層DIV有時會用到zoom:1;。
3.補充:邊界疊加在元素之間維護了一致的距離
在常規文件流中,2個或以上的塊級盒模型相鄰的垂直margin會被摺疊。最終的margin值計算方法如下:
a、全部都為正值,取最大者;
b、不全是正值,則都取絕對值,然後用正值減去最大值;
c、沒有正值,則都取絕對值,然後用0減去最大值。
注意:a.相鄰的盒模型可能由DOM元素動態產生並沒有相鄰或繼承關係。
b.只有普通文件流中塊框的垂直邊界才會發生邊界疊加,行內框、浮動框或絕對定位框之間的邊界不會疊加。