解决子元素设置margin，父元素也受影响

子元素设置margin，会影响到父元素，如下：

<template>
  <div>
    <div class="fu">     
      <!-- 父元素 -->
        <div class="zi">
          子元素
          </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.fu{
  width: 100%;
  height:calc(50vh - 154px);
  background-color: #cccccc;   
  /* 设置颜色容易区分 */
}
.zi{
  width: 100%;
  height: 50px;
  text-align: center;
  margin-top:100px;
  /* 设置margin为100px */
}
</style>

效果图：

image.png

解决办法：

给父元素加个padding或border或overflow:hidden

<style>
*{
  margin: 0;
  padding: 0;
}
.fu{
  width: 100%;
  height:calc(50vh - 154px);
  background-color: #cccccc;   
  overflow:hidden 
  /* 设置颜色容易区分 */
}
.zi{
  width: 100%;
  height: 50px;
  text-align: center;
  margin-top:100px;
  /* 设置margin为100px */
}
</style>

效果图：

image.png

发生的原因：

根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

也就是说：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断找自己的上一层。只要给父元素设置个有效的 border或者padding就可以有效的阻止子元素的margin越级，把自己的margin当父元素的margin执行。