码迷,mamicode.com
首页 > 其他好文 > 详细

margin塌陷与合并问题

时间:2018-08-04 20:31:08      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:position   解决   tar   没有   get   内核   hid   移动   日常   

本文转自: https://blog.csdn.net/Sunshineanl/article/details/70767277

margin塌陷问题和合并问题都只对垂直方向有效

  1. margin塌陷问题

    这个问题是一个经典的浏览器内核问题。具体表现是当两个元素嵌套到一起时,外层盒模型的margin-top取两个元素中margin-top较大的值。

    因为在正常的情况下内层元素是相对于外层元素进行移动,但是这时内层元素却相对于整个文档进行移动,好像外层元素没有“棚顶”一样,因此叫margin塌陷问题。

    margin塌陷问题触发示例:

    <div class = "wrapper">
        <div class = "content"></div>
    </div>
    
    <!--css代码-->
    .wrapper{
        width:200px;
        height:200px;
        background-color:red;
        margin-top:100px;
    }
    .content{
        width:100px;
        height:100px;
        background-color:green;
        margin-top:150px;
    
        <!--此时的margin-top为150px。-->
    }

    我们可以看到:此时的外层元素相对于整个文档的 margin-top = 150px;

    margin塌陷问题解决方法:

    1、给外层元素认为加一个“棚顶”:border。

    这种方法虽然能够解决问题,但是在日常开发中我们不使用它,因为他在外观上对元素进行了改变。

    2、bfc–block format context 块级格式化上下文

    每一个元素都是一个盒子,每一个盒子都符合一定的渲染规则。我们可以通过触发bfc方式,让特定盒子里的渲染规则发生变化。我们要给外层元素加一个特定属性来触发bfc来解决margin塌陷问题。触发bfc的方式有以下四种,我们可以根据实际的需求采用不同的方法。

    overflow:hidden;
    
    display:inline-block;
    
    position:absolute;
    
    float:left;

    2.margin合并问题

    具体表现为两个元素并列时,两者相隔的外边距取的是两者所设置margin的最大值。

    margin合并问题触发示例:

        <div class = ‘box1‘>box1</div>
        <div class = ‘box2‘>box2</div>
    
    
    
        <!--css代码-->
        .box1{
            background-color:red;
            margin-bottom:100px;
        }
        .box2{
            background-color:blue;
            margin-top:150px;
            <!--此时两者相隔的外边距为下面的box2所设置的margin-top:150px。-->
        }

    margin合并问题解决办法:

    我们仍然用bfc来解决。可以给其中一个元素包起来,在外层元素中设置bfc渲染规则。此时这个元素的渲染规则就改变了,就能够解决这个问题。

    一般margin合并不解决,margin塌陷要解决

margin塌陷与合并问题

标签:position   解决   tar   没有   get   内核   hid   移动   日常   

原文地址:https://www.cnblogs.com/oleolema/p/9419463.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!