CSS兩個經典BUG--margin塌陷與margin合併
阿新 • • 發佈:2018-12-22
margin塌陷問題
現象
先上示例程式碼
<div class="warpper">
<div class="box"></div>
</div>
* {
padding: 0;
margin: 0;
}
.warpper {
height: 200px;
width: 200px;
background-color: gray;
}
.box {
height: 100px;
width:100px;
background-color: green;
}
兩個巢狀的盒子如下所示
給巢狀在裡面的子元素盒子攝設定一個margin-top值,我們的設想是子元素會相對於父元素向下移動,但是效果與我們想的卻不太一樣。
我們看到子元素是相對於瀏覽器的頂端向下移動了,彷彿父元素沒有頂一樣,這種現象我們就稱之為margin塌陷。
解決方案
- 給父元素設定border。這種方法可以解決問題,但是在實際開發中不推薦,因為這樣會破壞頁面的樣式;
- 使用bfc來解決。觸發bfc有以下幾種方式:
float的值不為none
overflow的值不為visible
display的值為table-cell、tabble-caption和inline-block之一
position的值不為static或者releative中的任何一個
根據業務需求任選一種方式設定到父元素中,就可以解決margin塌陷問題;根據業務需求任選一種方式設定到父元素中,就可以解決margin塌陷問題; - 給父元素加一個padding。這種方式也不推薦,道理和第一條一樣。
修改後的程式碼如下:
* {
padding: 0;
margin: 0;
}
.warpper {
height: 200px;
width: 200px;
background-color: gray;
overflow: hidden;
}
.box {
margin-top: 100px;
height: 100px;
width:100px;
background-color: green;
}
margin合併問題
margin塌陷問題是父子級元素之間的bug,現在來看另一個經典的bug–margin合併問題。與margin塌陷不同,margin合併是兄弟級元素之間的bug。
先上程式碼
<body>
<div class="demo1">1</div>
<div class="demo2">2</div>
</body>
-----------------------------------------------------------------------
* {
padding: 0;
margin: 0;
}
.demo1 {
background-color: gray;
}
.demo2 {
background-color: red;
}
效果如圖所示:
我們給上面的div加一個下邊距100px,給下面的div加一個上邊距200px,根據設想,此時兩個div的間距應該是300px。但是經過實驗後我們發現兩個div之間的距離還是隻有200px。
* {
padding: 0;
margin: 0;
}
.demo1 {
background-color: gray;
margin-bottom: 200px;
}
.demo2 {
background-color: red;
margin-top: 100px;
}
這就是margin合併問題。即所謂的外邊距合併就是,當兩個垂直外邊距相遇時,它們將形成一個外邊距。合併的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
解決方法有兩種,第一種是直接改變其中一個外邊距的值,使之達到想要的效果(推薦使用);另外一種解決方式是將兄弟元素分別作為子元素放在塊級元素內,然後將其父級元素的渲染規則該為BFC。(不推薦使用,會破壞HTML文件結構)。