• 技术文章 >web前端 >css教程

    上下margin重叠传递问题

    (*-*)浩(*-*)浩2019-09-12 14:33:16原创62
    我发现强迫症真的是我一个大病。。。每次都非得把所有情况都实验出来不可。。。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值还是没有被分开,所以依然还会发生重叠现象!

    如果这里父元素里包含了多个块子元素,则每个子元素之间满足上下margin重叠,选择两者较大的margin作为两者之间的margin,第一个子元素的top和父元素重叠(左图上面白色距浏览器顶的白色区域即是),最后一个子元素的bottom和父元素重叠。IE6、7和标准浏览器显示效果均如左图。

    此时,如果两个块元素是浮动元素,那么,那么就不存在子元素和父元素的margin传递情况,此时,上下的margin值则是两者之间的各自margin值相加!标准浏览器显示如下图中,IE6显示如下图右。但为什么显示有差异呢?

    因为,额滴神啊!一波未平一波又起!块状元素和横向margin和浮动三者引发了IE6的新的兼容性问题——双边距bug(注意IE7没有双边距bug!!!!)

    由此

    实践时,首先一定要给父元素加触发haslyout的属性!这一条保证了在IE6、7下不出现margin传递问题和margin值消失问题;

    然后,考虑在标准浏览器下,给子元素加浮动可以解决没有border时出现的margin传递问题,但是此时加浮动后会造成IE6的双边距bug,所以我们实践时尽量将浮动的块状元素的margin换为padding,如果实在不能换就给该元素加display:inline;!

    3、两个Div(A、B)上下之间没有margin值,但是A中有子元素有margin,这时该子元素的margin值会传递到两者间,会使A、B两个元素之间填充上margin,仅限垂直方向!!!

    对于这个问题,大概就是这样啦,其实也很简单,只是我把所有的情况列出来了,其实综合起来就是上面总结部分的内容。

    我感觉这个margin传递和重叠都是因为两者的margin值之间没有边框或者是padding将margin这一空白区域隔开!!!!

    以上就是上下margin重叠传递问题的详细内容,更多请关注php中文网其它相关文章!

    phpstudy集成环境下载
    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:margin
    上一篇:CSS滤镜和混合模式处理的图片如何上传下载? 下一篇:没有了

    相关文章推荐

    • CSS中margin边界叠加问题及解决方案• css中margin:auto什么意思?margin:auto属性的用法详解• CSS中margin属性的偏移量详解(代码示例)• CSS中margin重叠及防止的方法介绍(代码示例)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网