首页技术文章正文

描述margin的重合问题，并提出你的解决方案【前端面试题】

更新时间:2021年03月15日18时05分来源:传智教育浏览次数:

1.同向margin的重叠：

图片的margin-top与3图片的margin-top发生重叠，
图片的margin-bottom与3图片的margin-bottom发生重叠。

这时候重叠之后的margin值由发生重叠两片的最大值决定；
如果其中一个出现负值，则由最大的正边距减去绝对值最大的负边距，如果没有最大正边距，则由0减去绝对值最大的负边距。

解决同向重叠的方法：
（1）在最外层的div中加入overflow:hidden;zoom:1
（2）在最外层加入padding:1px;属性
（3）在最外层加入：border:1px solid #cacbcc;

2.异向重叠问题：

图片的margin-bottom与2图片的margin-top发生重叠，这时候重叠之后的margin值由发生重叠两图片的最大值的决定的。

解决异向重叠问题：
float:left（只能解决IE6浏览器中的异向重叠问题，可以解决IE8以上、chorme、firefox、opera下的同向重叠问题）

猜你喜欢：

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

上一篇：怎样给盒子模型设置外边距？ 下一篇：什么是流式布局？流式布局是什么意思?

最新资讯