为什么按钮能把父组件的样式覆盖

img

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/678121665146196.png "#left")

img

给按钮增加一个margin-top 就出现了白色, 不加margin-top就不出现白色,为什么啊

原理:一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
你这里可以用父级的padding-top替换按钮的margin-top,或者给父级设置overflow: hidden

button的login_btn样式,并不存在说覆盖父级元素的样式
因为父级元素的样式只作用于父级元素。

.header加个overflow:hidden就可以了

原理:
互相嵌套的盒子,子元素的 margin-top 会作用在父元素上。
解决方法:

  1. 分隔父子元素的margin-top(设置边框,内边距)
  2. 给父元素设置overflow:hidden
  3. 转换成行内块元素
  4. 设置浮动