为什么div id =“wrap”会在我们将margin上到div div =''header'时移动

Question

为什么div id="wrap"在我们将保证金提供给div class =“header”时会移动？请解释为什么div会移动？

* {
  margin: 0;
  padding: 0;
}

#wrap {
  height: 200px;
  background: #000;
}

.header {
  height: 200px;
  width: 200px;
  margin-top: 20px;
  background: #F00;
}

<div id="wrap">
  <div class="header">
    d
  </div>
</div>

Answer 1

在包装器上使用overflow:auto或overflow:hidden。这基本上可以防止利润率崩溃。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}

#wrap {
  height: 200px;
  background: #000;
  overflow:auto;
}

.header {
  height: 200px;
  width: 200px;
  margin-top: 20px;
  background: #F00;
}

＆＃13;

<div id="wrap">
<div class="header">
d
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

* {
  margin: 0;
  padding: 0;
}

#wrap {
  height: 200px;
  background: #000;
}

.header {
  height: 200px;
  width: 200px;
  margin-top: 20px;
  background: #F00;
}

<div id="wrap">
  <div class="header">
   <center> d </center>
  </div>
</div>

Answer 3

div移动是因为孩子的边缘相对定位。

如果您希望不要按下#wrap div，请将其位置设置为绝对值。试试下面的代码段

* {
  margin: 0;
  padding: 0;
}

#wrap {
  height: 200px;
  background: #000;
  position: absolute;
}

.header {
  height: 200px;
  width: 200px;
  margin-top: 20px;
  background: #F00;
}

<div id="wrap">
  <div class="header">
    d
  </div>
</div>

您可以阅读有关css职位here

的更多信息