在HTML中 一个父元素包裹一个子元素的div,在给子元素的div设置margin-top时,会传递给父元素
- 解决方案
- 修改父元素的高度,给父元素加上padding-top:40px;
- 为父元素添加border和border-box
- 为父元素添加overflow:hidden
- 为父元素或者子元素声明绝对定位
- 为父元素或者子元素声明浮动
个人不太建议使用前两种方法,不仅需要计算,改父元素的高度,而且给父元素加padding-top的方法在微信小程序里无效。最后两种方法都是让父元素脱离文档流,但有的时候可能会影响布局。所以个人推荐使用给父元素添加overflow:hidden的方法。
2020-12-7更新:
使用padding-top的方法要将给父元素 box-sizing: border-box; 否则,padding-top会把父元素撑大,尤其是在给最外层元素添加padding-top时会把页面顶下去。