CSS(四) （盒子塌陷问题）

2024-01-15 10:54:16

文章目录

一、盒子塌陷问题
二、其他盒子塌陷问题

一、盒子塌陷问题

1.出现问题

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

给定两个DIV盒子，父盒子为宽高均为200像素的蓝色盒子，子盒子为宽高均为100像素的绿色盒子，给子盒子添加上外边距30px。
HTML结构为：

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

CSS样式为：


    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 200px;
            height: 200px;
            background-color: cyan;
        }
        .son {
            margin-top: 30px;
            width: 100px;
            height: 100px;
            background-color: darkgreen;
        }
    </style>

页面效果为：

分析：可以看出，给子盒子son添加的上外部边距没有起作用，子盒子的上边与父盒子的上边并没有30像素的间距，反而是父盒子的上边跟整个浏览器界面有30像素的间距，发生了盒子塌陷的问题。

2.解决办法

常见的解决盒子塌陷的方法有三种，如下所示：

不给子盒子添加上部的外边距margin-top，给父盒子添加上部的padding-top。
给父级元素溢出部分添加隐藏样式overflow：hidden。
给父级盒子加上边框border。

3.具体实现

一、取消子盒子的margin-top样式，给父盒子添加padding-top样式。
CSS样式

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            padding-top: 30px;
            width: 200px;
            height: 200px;
            background-color: cyan;
        }
        .son {
            /* margin-top: 30px; */
            width: 100px;
            height: 100px;
            background-color: darkgreen;
        }
    </style>

页面效果
分析：发现子盒子和父盒子的确产生了30像素的间距，但是有一个问题是：父盒子由于添加了一个上内边距而导致盒子的整体高度撑高了，现在的实际高度为200px+30px=230px，若要去除多余的30像素，有两种方法：
-1.手动计算，为父盒子的高度减少30像素，如此，父盒子的实际高度就变成了170px+30px=200px。

 .father {
            padding-top: 30px;
            width: 200px;
            height: 170px;//200px-30px=170px
            background-color: cyan;
        }

-2.给父盒子设置盒模型为border-box。

.father {
            padding-top: 30px;
            width: 200px;
            height: 200px;
            background-color: cyan;
            border-sizing:border-box;
        }

页面效果为：
- 结论：经过修改样式后，子盒子与父盒子之间有了30像素的间距，父盒子上部与浏览器界面也没有产生多余的30像素。

-二、给父级元素溢出部分添加隐藏样式overflow：hidden。

CSS样式：

        .father {
            width: 200px;
            height: 200px;
            background-color: cyan;
            overflow: hidden;
        }

页面效果：
结论：经过修改样式后，子盒子与父盒子之间有了30像素的间距，父盒子上部与浏览器界面也没有产生多余的30像素。

-三、给父级盒子加上边框border。

CSS样式：

        .father {
            width: 200px;
            height: 200px;
            background-color: cyan;
            border: 1px solid black;
        }
    </style>

页面效果：
结论：经过修改样式后，子盒子与父盒子之间有了30像素的间距，父盒子上部与浏览器界面也没有产生多余的30像素。
但是由于给父盒子添加边框，父盒子实际的高度已经变成了200px+2px=202px。
解决办法有两种：
-1.手动减小像素值；

.father {
            width: 198px;
            height: 198px;
            background-color: cyan;
            border: 1px solid black;
            box-sizing: border-box;
        }

-2.设置盒模型为box-sizing:border-box;

.father {
            width: 200px;
            height: 200px;
            background-color: cyan;
            border: 1px solid black;
            box-sizing: border-box;
        }

解决后，父盒子宽高显示为200px。

二、其他盒子塌陷问题

前面在整理CSS盒子浮动系列还总结了由于浮动元素引起的盒子塌陷问题，主要策略是：闭合浮动。详情见
清除浮动引起的盒子高度塌陷问题解决办法

码农公寓