這是一個(gè)早以前研究過的東西肚逸，今天java開發(fā)說起了這個(gè)，順帶記錄一下聘萨。
這里有一行代碼竹椒，很簡(jiǎn)單的一段代碼.
<style type="text/css">
#div1{
background:#000;
width:100px;
height:100px;
margin-top:10px;
}
#div2{
margin-top:20px;
background:#f00;
width:50px;
height:50px;
}
</style>
<div id="div1">
<div id="div2"></div>
</div>
可是在瀏覽器中打開后，居然是這個(gè)樣子的~
從效果上看div2的margin-top像是沒有生效米辐，經(jīng)測(cè)量div1的margin-top值胸完，發(fā)現(xiàn)這個(gè)div2的margin-top像是生效到div1上了书释。
就這幾行代碼寫錯(cuò)是不大可能，那這又是怎么回事赊窥？
之前遇到這個(gè)問題時(shí)爆惧，試遍了所有的瀏覽器，都是這個(gè)樣子锨能。
我就覺著這是個(gè)兼容性極佳的BUG扯再。
后來一個(gè)偶然的機(jī)會(huì)發(fā)現(xiàn)在父級(jí)上增加border或者
overflow:hidden是可以規(guī)避這個(gè)問題，且這個(gè)問題只會(huì)在常規(guī)流向中出現(xiàn)址遇，也就是說用position或者是float都不會(huì)存在這個(gè)問題熄阻。
整點(diǎn)原理規(guī)范什么的提高一下:
百度一下，你就知道倔约。秃殉。
以下來自W3C CSS2.1規(guī)范:http://www.css88.com/book/css2/box.html#margin-properties
8.3.1 邊距重合
在本規(guī)范中，表述邊距重合意味著兩個(gè)或多個(gè)框（可能相鄰也可能嵌套）的相鄰的邊距（其間沒有邊白或邊框間隔）重合在一起而形成一個(gè)單一的邊距浸剩。 CSS2中钾军，水平邊距永遠(yuǎn)不會(huì)重合。 垂直邊距可能在特定的框之間重合：1绢要、常規(guī)流向中兩個(gè)或多個(gè)塊框相鄰的垂直邊距會(huì)重合吏恭。結(jié)果的邊距寬度是相鄰邊距寬度中較大的值。如果出現(xiàn)負(fù)邊距重罪，則在最大的正邊距中減去絕對(duì)值最大的負(fù)邊距砸泛。如果沒有正邊距，則從零中減去絕對(duì)值最大的負(fù)邊距蛆封。2唇礁、在一個(gè)浮動(dòng)框和其它框之間的垂直邊距不重合。3惨篱、絕對(duì)和相對(duì)定位的框的邊距不重合盏筐。
首先了解到這并不是BUG，而是個(gè)規(guī)范砸讳，雖然看上去像是BUG,按著規(guī)范試一下,覺著還是像是個(gè)BUG琢融。
看規(guī)范是一目十行，過目就忘,還是整理一下簿寂。
外邊距合并的觸發(fā)條件：
- 常規(guī)流向布局漾抬，未使用定位或者是浮動(dòng)
- 存在垂直邊距
- 父級(jí)元素不存在border,overflow:hidden
- 在父級(jí)元素與子元素之間不存在擁有實(shí)際高度的元素(包含文本)
外邊距合并的解決方式：
- 父級(jí)元素增加border,overflow
- 使用定位或者是浮動(dòng)
- 使用padding-top替代margin-top,比較推薦這
個(gè)。
@拭目以待
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love
《野生前端工程師》專輯中所有文章均為@拭目以待 原創(chuàng)常遂，轉(zhuǎn)載請(qǐng)注明出處纳令。
