CSS DIV盒子塌陷问题

2024-01-15 11:50:07

文章目录

盒子塌陷问题

盒子塌陷问题

1 出现问题

有两个嵌套DIV盒子，父盒子里面有一个子盒子，想让子盒子与父盒子上边框之间有一段间距，但是给子级元素添加的外边距没有起效果，效果显示在了父级元素的身上。

示例：

设置大小两个DIV盒子，父盒子宽高各200px，子盒子宽高各50px。

HTML结构为：

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

CSS样式为：

*{
    margin: 0;
    padding: 0;
}
.box1{
    width: 200px;
    height: 200px;
    background-color: aqua;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: blue;
}

页面效果为：

CSS DIV盒子塌陷问题

给子盒子添加上外边距50px
- CSS
```
.box2{
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-top: 50px;
}
```
- 页面效果
  - 分析：可以看出，给子盒子box2添加的上部外边距没有起作用，子盒子的上边与父盒子的上边并没有50像素的间距，反而是父盒子的上边跟整个浏览器界面有50px的间距。发生了盒子塌陷的情况。

2 解决办法

常见的解决盒子塌陷的方法有三种，如下所示
1. 方法1：不给子盒子添加上部的外边距margin-top，给父盒子添加上部的内边距padding-top。
2. 方法2：给父级元素添加溢出部分隐藏样式overflow:hidden。
3. 方法3：给父级盒子加上边框border。

3 测试

方法1测试
- 取消子盒子的margin-top样式，给父盒子添加padding-top样式。
- CSS
```
.box1{
    width: 200px;
    height: 200px;
    background-color: aqua;
    padding-top:50px;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: blue;
    /*margin-top: 50px;*/
}
```
- 页面效果
  - 分析：发现子盒子跟父盒子之间确实产生了50像素的间距，但是又带来一个新的问题，即父盒子由于加了一个上内边距而把盒子的整体高度撑高了，设计的原高度为200px，现在实际高度为200+50=250px，若要消去此多余的50px，常用办法有两种：
    1. 方法1：手动计算，为父盒子的高度减少50px，这样一来，为父盒子添加上内边距之后，实际高度就变为150px+50px=200px。
```
.box1{
    width: 200px;
    height: 150px;
    background-color: aqua;
    padding-top:50px;
}
```
    2. 方法2：设置盒模型为border-box。
```
.box1{
    width: 200px;
    height: 200px;
    background-color: aqua;
    padding-top:50px;
    box-sizing:border-box;
}
```
  - 页面效果
    - 结论：经过修改样式后，子盒子成功的与父盒子之间有了50px的间距，父盒子上部与浏览器界面也没有产生多余的50px。方法1改子盒子的margin-top为父盒子的padding-top，并且设置父盒子盒模型为box-sizing:border-box或手动减去父盒子相应的像素值，成功了解决盒子塌陷的问题。
方法2测试：
- 给父盒子添加样式overflow:hidden。
- CSS
```
.box1{
    width: 200px;
    height: 200px;
    background-color: aqua;
    /*padding-top:50px;
    box-sizing:border-box;*/
    overflow:hidden;
}
```
- 页面效果
- 结论：经过修改样式后，子盒子与父盒子之间有了50px的间距，父盒子上部与浏览器界面也没有产生多余的50px。方法2给父盒子添加样式overflow:hidden，成功了解决盒子塌陷的问题。
方法3：
- 给父盒子添加边框样式。
- CSS
```
.box1{
    width: 200px;
    height: 200px;
    background-color: aqua;
    /*padding-top:50px;
    box-sizing:border-box;*/
    /*overflow:hidden;*/
    border:1px solid black;
}
```
- 页面效果
  - 分析：
    - 经过修改样式后，子盒子与父盒子之间有了50px的间距，父盒子上部与浏览器界面也没有产生多余的50px。方法3给父盒子添加样式 border:1px solid black;，成功了解决盒子塌陷的问题。
    - 但是由于给父盒子添加了边框，父盒子的实际宽高已经不再是200px，而是200+2=202px
  - 解决方法常见的依旧有两种
    1. 手动减小像素值；
    2. 设置盒模型为box-sizing:border-box。
    解决问题后，盒模型显示为宽高各200px。