CSS3盒子模型外边距的特性问题

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

正努力改变自己的人

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

阅读量427

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_19404693/article/details/124448112

版权

本文解析了两个div元素在垂直和水平方向上外边距交互的规则，包括垂直时的最大外边距决定距离、水平浮动元素间距的计算方式，以及父子盒子中外边距应用的技巧。通过实例和开发者工具展示，提供了解决常见布局问题的策略。

摘要由CSDN通过智能技术生成

一.两个盒子之间垂直外边距问题

首先，我们准备两个div，大小都一样200px，颜色分别为黄色和绿色，个人比较喜欢黄色，哈哈哈。

<style>
    .box1,.box2{
        width: 200px;
        height: 200px;
    }
    .box1{
        background-color: yellow;
    }
    .box2{
        background-color: green;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

现在他的效果是这样的
接下来我们向box1和box2分别添加外部下边距和外部上边距

.box1{
    margin-bottom:100px;
}
.box2{
    margin-top:50px;
}

你可能认为它运行之后会是这样的
但其实他是这样的
我们打开F12开发者工具，用选择器选中box1和box2
在这里我们可以发现box1外部下边距和box2的外部上边距他们重合了，它们之间的距离等于了box1的下部外边距。所以在垂直情况中两个盒子之间的距离就等于最大的外边距
换个说法：垂直情况，谁的”margin-方向“最大，那距离就等于谁

二. 两个盒子在水平方向上的问题

我们准备两个盒子，将它们向左浮动

<style>
    .box1,.box2{
        width: 200px;
        height: 200px;
        float:left;
    }
    .box1{
        background-color: yellow;
    }
    .box2{
        background-color: green;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

运行之后,它们的之间的距离为150px
我们打开F12开发者工具，分别选中box1和box2
我们可以看到它们之间的距离等于它们所设置的外边距之和

三.父子盒子，给子盒子加外边距，但作用在了父盒子上了，如何解决？（垂直情况下）

第一步，我们准备两个盒子box1和box2，box2嵌套在box1中，box1大小为500x500px,box2大小为200x200px

<style>
    .box1{
        width: 500px;
        height: 500px;
        background-color: yellow;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: green;
    }
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

截屏2021-12-10 22.18.24.png

现在我给box2（绿色），添加一个上边距50px

.box2{
    margin-top:50px;
}

运行之后，我们发现它是这个样子的
和想象中的不一样，他原本应该是下图这样的，但是它直接作用在了box1身上，变成了上图
如何解决？
I. 给父元素box1加上 overflow:hidden
II. 给父元素box1增加一个1px的透明边框，并把box1的宽高缩小1px
III. 把子元素box2的margin属性转换为父元素box1的padding属性，并把box1的高减去padding的属性值
IV. 给父元素和子元素添加浮动
VI. 将父元素变成BFC块（触发BFC即可）