盒子塌陷问题及解决方法

最新推荐文章于 2024-03-22 21:41:59 发布

LxyingINGing

最新推荐文章于 2024-03-22 21:41:59 发布

阅读量240

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/LxyingINGing/article/details/131840379

版权

文章讨论了CSS布局中两个常见问题：一是子元素的外边距影响到父元素，二是相邻盒子的外边距没有叠加。解决方案包括给父元素添加边框、设置溢出隐藏、使用浮动或改变内边距。同时，文章还介绍了外边距折叠的规则，包括正负外边距的处理方式。

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

一、给子元素加的外边距应用到了父级元素上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box{
        width:500px;
        height:500px;
        background:red;
       }
       .box1{
        width:200px;
        height:200px;
        background:blue;
        /* 水平居中 */
        margin:auto;
        margin-top:50px;
       }
    </style>
</head>
<body>
    <div class="box">
          <div class="box1"></div>
    </div>
</body>
</html>

运行结果：

解决方法：

1.给父级元素加外边框

.box{
        width:500px;
        height:500px;
        background:red;
        border:1px solid #ccc;
       }

2.给父级元素加溢出隐藏：overflow:hidden;

 .box{
        width:500px;
        height:500px;
        background:red;
        overflow: hidden;
       }

3.给父级元素加浮动float

.box{
        width:500px;
        height:500px;
        background:red;
        float: left;
       }

4.给父级元素加内边距（把子元素的外边距换成父元素的内边距）

 .box{
        width:500px;
        height:500px;
        background:red;
        padding-top:50px;
       }
       .box1{
        width:200px;
        height:200px;
        background:blue;
        /* 水平居中 */
        margin:auto;
       }

运行结果：

二、相邻两个上下盒子A和B，A盒子底部外边距与B盒子顶部外边距和未叠加，取二者最大值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box{
        width:200px;
        height:200px;
        background:red;
        margin-bottom:30px;
        /* border:1px solid #ccc; */
        /* overflow: hidden; */
        /* float: left; */
        /* padding-top:50px; */
       }
       .box1{
        width:200px;
        height:200px;
        background:blue;
        margin-top:50px;
        /* 水平居中 */
        /* margin:auto; */
       }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>
</html>

运行结果如下：

解决方法：

把所需的外边距数值加到其中一个盒子上即可

.box{
        width:200px;
        height:200px;
        background:red;
        /* margin-bottom:30px; */
        /* border:1px solid #ccc; */
        /* overflow: hidden; */
        /* float: left; */
        /* padding-top:50px; */
       }
       .box1{
        width:200px;
        height:200px;
        background:blue;
        margin-top:80px;
        /* 水平居中 */
        /* margin:auto; */
       }

运行结果如下：

相邻两个盒子外边距都是负数时，折叠的结果是两者绝对值的较大值；如下例所示：折叠的值为80px。

.box{
        width:300px;
        height:200px;
        background:red;
        margin-bottom:-30px;
        /* border:1px solid #ccc; */
        /* overflow: hidden; */
        /* float: left; */
        /* padding-top:50px; */
       }
       .box1{
        width:200px;
        height:200px;
        background:blue;
        margin-top:-80px;
        /* 水平居中 */
        /* margin:auto; */
       }

相邻两个盒子外边距一正一负时，折叠的结果是两者相加的和；如下例所示：折叠的值为-50px。

.box{
        width:300px;
        height:200px;
        background:red;
        margin-bottom:30px;
        /* border:1px solid #ccc; */
        /* overflow: hidden; */
        /* float: left; */
        /* padding-top:50px; */
       }
       .box1{
        width:200px;
        height:200px;
        background:blue;
        margin-top:-80px;
        /* 水平居中 */
        /* margin:auto; */
       }