當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

margin塌陷问题

發(fā)布時(shí)間：2024/4/15 编程问答 64 豆豆

生活随笔收集整理的這篇文章主要介紹了 margin塌陷问题小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

magin塌陷現(xiàn)象：在垂直方向，父子關(guān)系兩個(gè)盒子中margin大的覆蓋margin小的，導(dǎo)致兩個(gè)盒子有同一個(gè)margin.

<style>

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

margin-top:70px;

}
</style>
<body>

</body>

正常情況下,父級元素應(yīng)該相對瀏覽器進(jìn)行定位,子級相對父級定位.

但由于margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣.

結(jié)果：本應(yīng)該是子元素的margin-top=70px(子元素的margin是相對于父元素的),父元素的等于50px,但最后結(jié)果子元素和父元素的margin-top都為70px.

解決辦法：

1.父元素加border,注意加border時(shí)一定要有solid(不管寫不寫顏色)，沒寫solid僅僅有個(gè)border:1px,瀏覽器實(shí)際上是沒渲染border的。(不建議使用)

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

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

改變父級的渲染規(guī)則有以下四種方法,給父級盒子添加

(1)position:absolute/fixed

(2)display:inline-block;

(3)float:left/right

(4)overflow:hidden

這四種方法都能觸發(fā)bfc,但是使用的時(shí)候都會帶來不同的麻煩,具體使用中還需根據(jù)具體情況選擇沒有影響的來解決margin塌陷

?bfc:

浮動(dòng)元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，
都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）。

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

出現(xiàn)這種情況的條件是body有一個(gè)div脫離了標(biāo)準(zhǔn)流。

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

</style>
<body>

</body>

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

轉(zhuǎn)載于:https://www.cnblogs.com/shiyuzuxia/p/9729912.html

以上是生活随笔為你收集整理的margin塌陷问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。