1. 程式人生 > >頁面佈局筆記記錄

頁面佈局筆記記錄

問題:子div和父div的margin設定。

 <div class="a"><div class="b"></div></div>當設定.b {margin: 30px auto 0}時,b盒子並沒有距離a盒子頂端30px,反而a盒子也被影響離頂端30px。

原因:所有毗鄰的兩個或更多盒元素的margin將會合併為一個margin共享之。毗鄰的定義為:同級或者巢狀的盒元素,並且它們之間沒有非空內容、Padding或Border分隔。

方法1:在父DIV的css加上“overflow:hidden;”。(最佳)

方法2:在父DIV的css加上“border:1px solid transparent;”。

方法2:父級設定padding(破壞非空白的摺疊條件)

方法3:在父DIV的css加上float或者position:absolute。(浮動或絕對定位不參與margin的摺疊)