HTML中怎么解決margin塌陷問題

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

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

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

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

設置margin-top值時變化

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

Image15.jpg

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

Image14.jpg

由上述內容我們可以知道什么是margin塌陷

margin塌陷

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

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

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

大的值

解決margin塌陷的方法

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

方法一

position:absolute;

設置相對定位

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

Image17.jpg

方法二

display:inline-block；

設置成行塊級元素

Image17.jpg

方法三

float:left和float:right;

利用浮動來改變樣式

Image17.jpg

方法四

overflow:hidden

溢出盒子的部分隱藏展示

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

網站題目：HTML中怎么解決margin塌陷問題
本文鏈接：http://muchs.cn/article16/jopjgg.html

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

廣告

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