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

1.同向margin的重疊：

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

這時(shí)候重疊之后的margin值由發(fā)生重疊兩片的最大值決定；
如果其中一個(gè)出現(xiàn)負(fù)值，則由最大的正邊距減去絕對(duì)值最大的負(fù)邊距，如果沒有最大正邊距，則由0減去絕對(duì)值最大的負(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)班