CSS DIV盒子塌陷问题------为什么会出现此现象?How to solve it efficiently ?快到碗里来!

CSS 专栏收录该内容
4 篇文章 0 订阅

盒子塌陷问题

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;
      }
      
    • 页面效果为:

    在这里插入图片描述

  • 给子盒子添加上外边距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。

        在这里插入图片描述

4 总结

  • 解决盒子塌陷的方法常见的有三种,如下所示:
    • 方法1:不给子盒子添加上部的外边距margin-top,给父盒子添加上部的内边距padding-top。
    • 方法2:给父级元素添加溢出部分隐藏样式overflow:hidden。
    • 方法3:给父级盒子加上边框border。
  • 1
    点赞
  • 2
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值