盒子模型问题,合并和塌陷问题

最新推荐文章于 2023-07-31 21:48:48 发布

极具浪漫主义色彩的菜鸟学习之路

最新推荐文章于 2023-07-31 21:48:48 发布

阅读量418

点赞数

本文链接：https://blog.csdn.net/muweichang/article/details/124480357

版权

来自up主亲爱的嘉倩

【电影感vlog】雷克雅未克，遇见大海｜索尼6400

盒子模型问题

外边距折叠现象

外边距折叠现象

1.合并现象

当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。

两个垂直布局的块级元素，上下的margin会合并

结果会取两者之间margin的最大值

解决办法：只给其中一个盒子设置margin即可

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: rgb(50, 63, 63);
        }
        .box1{
            margin-bottom: 100px;
            
        }
        .box2{
            margin-top: 50px;
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    
</body>

在这里插入图片描述

解决办法：只给其中一个盒子设置margin即可

        .box1{
         margin-bottom: 150px;
            
        }
        .box2{
        }

在这里插入图片描述

2.塌陷问题

父子问题
在div里面有子元素div时，若父元素div在没有设置overflow:hidden或者是border属性，
则父元素div的margin-top的值为父元素div和子元素div中的margin-top的最大值。

互相嵌套的块级元素，子元素的margin-top会作用在父元素上

结果导致父元素一起往下移动

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rgb(17, 20, 23);
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: brown;
            margin-top: 100px;

        }
        
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    
</body>

在这里插入图片描述

解决办法：

给父元素设置overflow:hidden(常用）
给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
转换成行内块元素
设置浮动

  .box1{
            width: 200px;
            height: 200px;
            background-color: rgb(17, 20, 23);
            overflow: hidden;
        }
         /* 利用overflow属性或者通过给父级元素设置border可以避免出现父级元素的margin合并的情况，当没有设置这个属性时，该div的margin-top值会取box1的margin-top和其自身margin-top的最大值

在这里插入图片描述