前端 - margin的問(wèn)題，那個(gè)老哥幫我解釋下
問(wèn)題描述
<!DOCTYPE html><html lang='en'><head> <title>test</title> <style type='text/css'>* { margin: 0; padding: 0;}.a{ height:48px; background: #eee;}.b{ height:520px; background: #ff4949;}.c{ width:90%; height:300px; margin:20px auto; background: #fff;} </style></head><body><p class='a'></p><p class='b'> <p class='c'></p></p></body></html>
p.c 不是應(yīng)該被紅色環(huán)繞嗎？煩請(qǐng)那個(gè)老哥解釋下。
問(wèn)題解答
回答1：因?yàn)樵贐FC中，兩相鄰（兄弟或父子）、沒有邊框且沒有padding，元素的margin-top與其第一個(gè)常規(guī)文檔流的子元素的margin-top，會(huì)產(chǎn)生marign-collapse（外邊距折疊）。
你給b加邊框，
border: 1px solid transparent;
或者加padding，
padding: 1px 0;
都能消除。
或者，你可以給b加 overflow: hidden;。
可以參考：深入理解BFC和Margin Collapse
回答2：你在.b中添加個(gè)overflow: hidden;就可以了。
因?yàn)閛verflow 使用除了 visible 以外的值（hidden，auto，scroll）會(huì)觸發(fā)BFC。什么是BFC？Block Formatting Contexts (塊級(jí)格式化上下文)具有 BFC 的元素可以看作是隔離了的獨(dú)立容器，容器里面的元素不會(huì)在布局上影響到外面的元素，并且 BFC 具有普通容器沒有的一些特性，例如可以包含浮動(dòng)元素，上文中的第二類清除浮動(dòng)的方法（如 overflow 方法）就是觸發(fā)了浮動(dòng)元素的父元素的 BFC ，使到它可以包含浮動(dòng)元素，從而防止出現(xiàn)高度塌陷的問(wèn)題。
回答3：overflow: hidden; 你把這句話加到 p.b 上。
回答4：搜一下 “子元素margin影響父元素”
回答5：這個(gè)叫外邊距重疊吧,子級(jí)元素的外邊距會(huì)影響父級(jí)元素,并且這兩的外邊距大整個(gè)容器的外邊距就以大的為準(zhǔn)。這個(gè)時(shí)候應(yīng)該選擇觸發(fā)BFC,BFC是什么前面幾位說(shuō)的很清楚了,觸發(fā)BFC的情況有:
根元素
float屬性不為none；
position為absolute或fixed；
display為inline-block, table-cell, table-caption, flex, inline-flex；
overflow不為visible；
解決辦法：
如果你給父級(jí)加上overflow：hidden,或者加上透明邊框就可以解決了。
網(wǎng)公網(wǎng)安備