上下margin重叠传递问题

2020-06-26 20:14:22易采站长站整理
我发现强迫症真的是我一个大病。。。每次都非得把所有情况都实验出来不可。。。BUT!!!!!!!!!悲催的是,这么多情况我根本记不住。。。还是要在写代码的时候不断出错再排错~受不了自己了!不过还是把这部分总结到这里啦~

下面的几个部分应该是margin重叠问题的所有情况了:

1、两个普通元素上下的margin会合并为一个margin,哪个大选哪个!

两个浮动元素不会出现margin传递的问题,依然是上面元素的margin-bottom和下面元素的margin-top相加作为两者之间的margin值。

2、两个元素如果是包含关系,父元素和子元素上下margin值也会合并(推荐学习:CSS视频教程)

当父元素不加边框,不设置宽高,即父级没有触发haslayout时

IE6、7和标准浏览器下,均会发生margin传递问题子元素和父元素的高度相同(子元素的top将和父元素的top在一条直线上,bottom将和父元素的bottom在一条直线上)而父元素则选择两者之间大的数值作为父元素的margin-top值和margin-bottom值!!!

子元素的margin-left和margin-right值依然存在

当父元素不加边框,但是,设置宽或高或zoom:1;即父级加可以触发haslayout的属性时

标准浏览器下,会发生margin传递但是在IE6、7下则不会发生margin传递(即子元素的margin就是相对于父元素的,不会传递给父级)

当父级加边框,并且父级没有触发haslayout时

标准浏览器下,不会发生margin传递IE6、7下,子元素的margin彻底消失!

当父级加边框,并且父级触发haslayout(即加width或height或zoom:1)时,IE6、7和标准浏览器下,都不会发生margin传递!!!

对于IE6、7来说:

即只要触发haslayout,不管给不给父元素加边框,不管标准浏览器会不会发生margin传递,IE6、7下都不会发生margin传递!!!

而对于标准浏览器来说:

只有加边框才能避免margin传递!!!

给父元素添加边框,则子元素和父元素之间的margin就有分割线了,此时将不会发生合并现象了!如果给子元素添加边框两者的margin值还是没有被分开,所以依然还会发生重叠现象!