CSS教程

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

本文主要是介绍CSS(四) （盒子塌陷问题），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

  • 一、盒子塌陷问题
    • 1.出现问题
    • 2.解决办法
    • 3.具体实现
  • 二、其他盒子塌陷问题

一、盒子塌陷问题

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盒子浮动系列还总结了由于浮动元素引起的盒子塌陷问题，主要策略是：闭合浮动。详情见
清除浮动引起的盒子高度塌陷问题解决办法

这篇关于CSS(四) （盒子塌陷问题）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航