這篇文章主要介紹了HTML中怎么解決margin塌陷問題的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇HTML中怎么解決margin塌陷問題文章都會有所收獲，下面我們一起來看看吧。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計制作、做網(wǎng)站服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)安塞免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

margin是設(shè)置元素的外邊距，正常情況下設(shè)置margin值時應(yīng)該是父元素相對于瀏覽器定位，子元素相對于父元素定位而我們常常碰到無論怎么給margin設(shè)置值時都毫無反應(yīng)。

html代碼

<divclass="box1">

<divclass="box2"></div>

</div>

css代碼

.box1{

width:200px;

height:200px;

background-color:rgb(16,128,214);

}

.box2{

width:100px;

height:100px;

background-color:rgb(128,227,248);

}

效果圖

Image12.jpg

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

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

Image15.jpg

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

Image14.jpg

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

margin塌陷

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

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

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

大的值

解決margin塌陷的方法

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

方法一

position:absolute;

設(shè)置相對定位

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

Image17.jpg

方法二

display:inline-block；

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

Image17.jpg

方法三

float:left和float:right;

利用浮動來改變樣式

Image17.jpg

方法四

overflow:hidden

溢出盒子的部分隱藏展示

關(guān)于“HTML中怎么解決margin塌陷問題”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“HTML中怎么解決margin塌陷問題”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：HTML中怎么解決margin塌陷問題
本文鏈接：http://jinyejixie.com/article16/jopjgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、網(wǎng)站策劃、動態(tài)網(wǎng)站、建站公司、網(wǎng)站營銷、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)