在HTML中 一個(gè)父元素包裹一個(gè)子元素的div,在給子元素的div設(shè)置margin-top時(shí),會(huì)傳遞給父元素
- 解決方案
- 修改父元素的高度,給父元素加上padding-top:40px;
- 為父元素添加border和border-box
- 為父元素添加overflow:hidden
- 為父元素或者子元素聲明絕對定位
- 為父元素或者子元素聲明浮動(dòng)
個(gè)人不太建議使用前兩種方法,不僅需要計(jì)算,改父元素的高度,而且給父元素加padding-top的方法在微信小程序里無效。最后兩種方法都是讓父元素脫離文檔流,但有的時(shí)候可能會(huì)影響布局。所以個(gè)人推薦使用給父元素添加overflow:hidden的方法。
2020-12-7更新:
使用padding-top的方法要將給父元素 box-sizing: border-box; 否則,padding-top會(huì)把父元素?fù)未?,尤其是在給最外層元素添加padding-top時(shí)會(huì)把頁面頂下去。