HTML中怎么解決margin塌陷問題

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

　　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)注億速云行業(yè)資訊頻道。