首頁技術(shù)文章正文

margin重合問題及解決方式【web前端面試題】

更新時(shí)間:2021-03-15 來源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif

1.同向margin的重疊:

圖片的margin-top與3圖片的margin-top發(fā)生重疊,
圖片的margin-bottom與3圖片的margin-bottom發(fā)生重疊。

這時(shí)候重疊之后的margin值由發(fā)生重疊兩片的最大值決定;
如果其中一個(gè)出現(xiàn)負(fù)值,則由最大的正邊距減去絕對值最大的負(fù)邊距,如果沒有最大正邊距,則由0減去絕對值最大的負(fù)邊距。

解決同向重疊的方法:
(1)在最外層的div中加入overflow:hidden;zoom:1
(2)在最外層加入padding:1px;屬性
(3)在最外層加入:border:1px solid #cacbcc;

2.異向重疊問題:

圖片的margin-bottom與2圖片的margin-top發(fā)生重疊,這時(shí)候重疊之后的margin值由發(fā)生重疊兩圖片的最大值的決定的。

解決異向重疊問題:
float:left(只能解決IE6瀏覽器中的異向重疊問題,可以解決IE8以上、chorme、firefox、opera下的同向重疊問題)



猜你喜歡:

前端面試題:兼容性面試題匯總【最新】

web面試題css瀏覽器的兼容性問題

VUE是什么意思?【web前端開發(fā)培訓(xùn)】

黑馬程序員web前端培訓(xùn)班

分享到:
在線咨詢 我要報(bào)名
和我們在線交談!