margin塌陷問題

時間 2019-11-10

標籤 margin 問題欄目 CSS 简体版

原文原文鏈接

magin塌陷現象：在垂直方向，父子關係兩個盒子中margin大的覆蓋margin小的，致使兩個盒子有同一個margin.瀏覽器

<style>spa

.div1{
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
}
.div2{
width: 50px;
height: 50px;
background-color: green;3d

margin-top:70px;code

}
</style>
<body>blog

<div class="div1">
<div class="div2"></div>
</div>文檔

</body>it

正常狀況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位.io

但因爲margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了同樣.table

結果：本應該是子元素的margin-top=70px(子元素的margin是相對於父元素的),父元素的等於50px,但最後結果子元素和父元素的margin-top都爲70px.class

解決辦法：

1.父元素加border,注意加border時必定要有solid(無論寫不寫顏色)，沒寫solid僅僅有個border:1px,瀏覽器其實是沒渲染border的。(不建議使用)

2.父元素加padding(不建議使用)

3.改變bfc(塊級格式上下文)

改變父級的渲染規則有如下四種方法,給父級盒子添加

(1)position:absolute/fixed

(2)display:inline-block;

(3)float:left/right

(4)overflow:hidden

這四種方法都能觸發bfc,可是使用的時候都會帶來不一樣的麻煩,具體使用中還需根據具體狀況選擇沒有影響的來解決margin塌陷

bfc:

浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不爲「visiable」的塊級盒子，
都會爲他們的內容建立新的BFC（塊級格式上下文）。

特殊狀況：下面這種也造成了margin塌陷，父級是body,子級div2沒有相對body定位，而是和body一塊兒用一個margin.div1脫離了文檔流，不會相對body定位，但div2得相對body定位。

出現這種狀況的條件是body有一個div脫離了標準流。

}
.box2{
width: 100px;
height: 100px;
background-color: gray;
margin-top: 100px;
}

</style>
<body>

</body>

解決辦法：和上面同理，只是父級變成了body

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。