日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

【HTML/CSS】margin塌陷和合并问题

發布時間：2024/7/5 HTML 98 豆豆
生活随笔 收集整理的這篇文章主要介紹了 【HTML/CSS】margin塌陷和合并问题 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1 margin塌陷問題

1.1 示例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin塌陷</title><style>.parent{width: 200px;height: 200px;background-color: red;margin-left: 100px;margin-top: 100px;}.child{width: 100px;height: 100px;background-color: blue;margin-left: 50px;margin-top: 50px; /*子元素的margin-top無效？*/}</style> </head> <body><div class="parent"><div class="child"></div></div> </body> </html>

顯示如下圖所示，從圖中可以看到子元素的margin-top沒有顯示出來，希望的是距離父盒子的頂部50px，但是現在和頂部重疊了，這就發生了margin塌陷。

造成的原因是：父子處于同一個BFC中，在同一個BFC中會出現垂直方向的margin重疊，margin重疊取最大值，即父元素的margin-top:100px。

1.2 margin塌陷的解決

可以觸發BFC，改變父級的渲染規則。

.parent{width: 200px;height: 200px;background-color: red;margin-left: 100px;margin-top: 100px;/*觸發BFC*//* position: absolute; *//* position: fixed; */overflow: hidden; /*推薦使用這種*//* overflow: auto; *//* overflow: scroll; 會影響樣式 *//* float: left; 會影響布局*//* float: right; 會影響布局*//* display: table-cell; */}

2 margin合并問題

2.1 示例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin合并</title><style>.one{background-color: red;height: 100px;width: 100px;margin-bottom: 100px;}.two{background-color: blue;height: 100px;width: 100px;margin-top: 50px;}</style> </head> <body><div class="one"></div><div class="two"></div> </body> </html>

如下圖所示，兩個兄弟塊之間的margin合并了，顯示的是較大值。

2.2 解決方法

  • 為一個元素添加BFC，這種方法修改了HTML的結構，不好
    • <div class="bfc"><div class="one"></div></div><div class="two"></div>
  • 計算出合適的值，設置其中下面元素的margin-top或者上面元素的margin-bottom即可。

    • 總結

    以上是生活随笔為你收集整理的【HTML/CSS】margin塌陷和合并问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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