margin塌陷 其實就是一個bug。很多人在開發的時候都會遇到。但是卻不知道是怎么產生的。

一下代碼演示margin塌陷

參考：

這里是一個父子關系的div

首先我們設置一下這個2個div 的css樣式

.ch{

margin-left: 100px; /*左邊距離父標簽100px*/

width: 100px;

height: 100px;

background-color: red;

}

.fa{

margin-left: 100px;

margin-top: 100px;

width: 200px;

height: 200px;

background-color: blue;

}

一下是運行效果

屏幕快照 2018-06-22 上午10.23.01.png

這么看是沒有任何問題的

如果我門在加上margin-top: 100px;頂部距離父標簽100px

.ch{

margin-left: 100px; /*左邊距離父標簽100px*/

margin-top: 100px;/*頂部距離父標簽100px*/

width: 100px;

height: 100px;

background-color: red;

}

屏幕快照 2018-06-22 上午10.23.01.png

效果卻并沒有想我們預期的那樣子試圖頂部距離父標簽100px

這個現象就是margin塌陷

要解決這個問題有2個方法：

第一個(強硬手段，適合外包)特點：簡單粗暴

我們可以直接設置父標簽border-top: 1px solid yellow;

.fa{

margin-left: 100px;

margin-top: 100px;

width: 200px;

height: 200px;

background-color: blue;

border-top: 1px solid yellow;

}

效果圖：

屏幕快照 2018-06-22 上午10.45.22.png

效果達到

說明border-top: 1px solid yellow，可以解決這個問題，yellow顏色只是我胡亂設置的。不必在意。但是在開發的還是設置和背景顏色一樣比較好。

第二方法：簡稱bfc (block format context)塊級格式化上下文。(專業用該方法)

注意：如果要使用這個，一定要對其要有一定的理解。不然就算解決了margin塌陷, 也會出現其他的問題。

解釋一下：

你可這么理解，css其實就是把標簽當成是一個“塊”或者說是“盒子”。每一個盒子都有一摸一樣的渲染規則。就是你設置什么屬性，它就會按照你寫的代碼，按照你的方式圖形化出來。

bfc就是通過一種手段，改變其中一個或者多個盒子中的渲染規則，就是不讓他按照傳統的語法來，那么這些盒子就會按照另一套語法來。其實bfc改變的語法規則很少，百分之一可能都不到，但是就是這很少的這部分可以解決這個問題。

如何觸發bfc

display: inline-block;

position: absolute;

float: right/left;

overflow: hidden;

只要在父標簽設置了這幾個屬性的其中一個就可以出發bfc，其實使用起來很簡單，只是使用這個，一定要知道，這幾個屬性的含義，針對性的使用。

.fa{

/*display: inline-block;*/ 改變標簽的類型

position: absolute; 對象脫離常規流

/*float: right/left;*/ 設置元素浮在右邊/左邊

/*overflow: hidden;*/ 超出的部分隱藏

margin-left: 100px;

margin-top: 100px;

width: 200px;

height: 200px;

background-color: blue;

}

總結

以上是生活随笔為你收集整理的HTML外边框塌陷什么意思,html-margin塌陷 ：的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。