当我们需要实现一个盒子里包含着子盒子,并且父盒子距离顶部需要一个margin值的时候,可以l利用css属性来哦设置;

但是我们还想要利用margin来让子盒子实现距离父盒子有一个值时,我们就会发现父盒子会东,但是子盒子相对于父盒子还是没有发生移动;

这是只改变父盒子的margin

我们想改变子盒子想到对于父盒子的margin值,如果直接给子盒子添加值的话,会发生塌陷的问题

<style>
  .father {
      width: 400px;
      height: 400px;
      background-color: pink;
      margin-top: 100px;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: yellow;
      margin-top: 200px;
    }
  </style>
<div class="father">
    <div class="son">
</div>
    </div>

如果我们直接这样做,就会出现塌陷

image.png

我们要实现的的是子盒子相对于与父盒子来说是有一个margin-top的值

可以使用3种方法:

1.可以给父盒子设置边框

设置边框

css代码:

      width: 400px;
      height: 400px;
      background-color: pink;
      margin-top: 100px;
      border-top: 1px solid transparent;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: yellow;
      margin-top: 200px;
    }

2.通过添加padding值

      width: 400px;
      height: 400px;
      background-color: pink;
      margin-top: 100px;
      /* border-top: 1px solid transparent; */
      padding-top: 1px;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: yellow;
      margin-top: 200px;
    }

前两种方法会改变盒子的大小,我们在盒子的高度上减去1px就可以了

3.通过overflow:hidden;属性来设置,这种就不会改变盒子的大小了

      width: 400px;
      height: 400px;
      background-color: pink;
      margin-top: 100px;
      /* border-top: 1px solid transparent; */
      /* padding-top: 1px; */
      overflow: hidden;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: yellow;
      margin-top: 200px;
    }

以上就是解决盒子塌陷问题的3种方法;最常用的就是第3种,

如果通过浮动,,固定,或者是绝对定位的盒子,就不会出现盒子塌陷的问题了;