CSS(四) （盒子塌陷问题）
作者：互联网
文章目录
一、盒子塌陷问题
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盒子浮动系列还总结了由于浮动元素引起的盒子塌陷问题，主要策略是：闭合浮动。详情见
清除浮动引起的盒子高度塌陷问题解决办法
标签：盒子,30,像素,塌陷,background,border,CSS,200px 来源： https://blog.csdn.net/m0_48375854/article/details/120791132