首页技术文章正文

margin重合问题及解决方式【web前端面试题】

更新时间:2021-03-15 来源:黑马程序员 浏览量:

1577370495235_学IT就到黑马程序员.gif

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下的同向重叠问题)



猜你喜欢:

前端面试题:兼容性面试题汇总【最新】

web面试题css浏览器的兼容性问题

VUE是什么意思?【web前端开发培训】

黑马程序员web前端培训班

分享到:
在线咨询 我要报名
和我们在线交谈!