這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)margin如何解決塌陷的問題，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)公司主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁視覺設(shè)計、VI標(biāo)志設(shè)計、全網(wǎng)營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式成都網(wǎng)站建設(shè)、手機(jī)網(wǎng)站制作、微商城、網(wǎng)站托管及成都網(wǎng)站維護(hù)、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計、SEO優(yōu)化排名。設(shè)計、前端、后端三個建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為成都廣告制作行業(yè)客戶提供了網(wǎng)站推廣服務(wù)。

margin是設(shè)置元素的外邊距，正常情況下設(shè)置margin值時應(yīng)該是父元素相對于瀏覽器定位，子元素相對于父元素定位而我們常常碰到無論怎么給margin設(shè)置值時都毫無反應(yīng)，今天就和大家分享解決這個問題的方法。

html代碼

css代碼

.box1{
	width:200px;
	height:200px;
	background-color:rgb(16,128,214);
	}
.box2{
        width:100px;
	height:100px;
        background-color:rgb(128,227,248);
}

效果圖

設(shè)置margin-top值時變化

當(dāng)給box1設(shè)置margin-top:100px時，box2也設(shè)置margin-top:100px，只有父元素相對于瀏覽器向下了100px，而子元素相對于父元素的位置并未改變

但是當(dāng)給子元素設(shè)置的margin-top：150px,大于父盒子高度時，子元素就會不再相對于父元素定位了而是帶著父元素一起相對于瀏覽器定位向下移動150px

由上述內(nèi)容我們可以知道什么是margin塌陷

margin 塌陷

margin 塌陷是在父級相對于瀏覽器進(jìn)行定位時但子級沒有相對于父級定位，

子級相對于父級就像塌陷了一樣

父子嵌套元素垂直方向的 margin，父子元素是結(jié)合在一起的，他們兩個會取其中最

大的值

解決margin塌陷的方法

實(shí)質(zhì)就是觸發(fā)盒子的bfc（block format context塊級格式化上下文）來改變父級元素的渲染規(guī)則

方法一

position:absolute;

設(shè)置相對定位

通過給父元素增加一個相對定位的屬性來解決margin塌陷問題

方法二

display:inline-block；

設(shè)置成行塊級元素

方法三

float:left和float:right;

利用浮動來改變樣式

方法四

overflow:hidden

溢出盒子的部分隱藏展示

上述就是小編為大家分享的margin如何解決塌陷的問題了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。