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

最新推荐文章于 2022-04-29 20:07:43 发布

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

最新推荐文章于 2022-04-29 20:07:43 发布

阅读量390

点赞数

本文链接：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的最大值

在这里插入图片描述

行内元素

我们知道行内元素无法设置宽高，那现在对于内外边框也是一样，如果想要通过margin和padding改变行内标签的位置，无法生效，水平可以,垂直不行。

行内标签的margin-top和bottom不生效
行内标签的padding-top和padding-bottom不生效
如果要垂直显示的话，加line-height。

在这里插入图片描述

对于这篇学习笔记就暂时到这了，兄弟们加油❤️🤣😂😊😘💕😍😒
从现在做起，坚持下去，一天进步一小点，不久的将来，你会感谢曾经努力的你！
👩‍🔧👨‍🔧🧑‍🔧

如果有出错的，请各位友友指正

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

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
盒子模型问题,合并和塌陷问题

盒子模型问题外边距折叠现象1.合并现象2.塌陷问题行内元素外边距折叠现象1.合并现象当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。两个垂直布局的块级元素，上下的margin会合并结果会取两者之间margin的最大值解决办法：只给其中一个盒子设置margin即可 <style> div{ width: 100px;
复制链接

扫一扫