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

描述margin的重合問題，并提出你的解決方案【前端面試題】

更新時(shí)間:2021年03月15日18時(shí)05分來源:傳智教育瀏覽次數(shù):

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下的同向重疊問題）

猜你喜歡：

Js語言解析：vue語言中的keep-alive

最新資訊