資訊專欄INFORMATION COLUMN
摘要：結(jié)果的邊界寬度是相鄰邊界寬度中最大的值。但是邊界的重疊也有例外情況水平邊距永遠(yuǎn)不會(huì)重合。外邊距重疊示例外邊距重疊是指兩個(gè)垂直相鄰的塊級(jí)元素，當(dāng)上下兩個(gè)邊距相遇時(shí)，起外邊距會(huì)產(chǎn)生重疊現(xiàn)象，且重疊后的外邊距，等于其中較大者。
邊距重疊解決方案(BFC)
首先要明確BFC是什么意思，其全英文拼寫為 Block Formatting Context 直譯為“塊級(jí)格式化上下文”
?
兩個(gè)或多個(gè)塊級(jí)盒子的垂直相鄰邊界會(huì)重合。結(jié)果的邊界寬度是相鄰邊界寬度中最大的值。如果出現(xiàn)負(fù)邊界，則在最大的正邊界中減去絕對(duì)值最大的負(fù)邊界。如果沒有正邊界，則從零中減去絕對(duì)值最大的負(fù)邊界。注意：相鄰的盒子可能并非是由父子關(guān)系或同胞關(guān)系的元素生成。
但是邊界的重疊也有例外情況：
1、水平邊距永遠(yuǎn)不會(huì)重合。
2、在規(guī)范文檔中，2個(gè)或以上的塊級(jí)盒模型相鄰的垂直margin會(huì)重疊。最終的margin值計(jì)算方法如下：
a、全部都為正值，取最大者；
b、不全是正值，則都取絕對(duì)值，然后用正值減去最大值；
c、沒有正值，則都取絕對(duì)值，然后用0減去最大值。
注意：相鄰的盒模型可能由DOM元素動(dòng)態(tài)產(chǎn)生并沒有相鄰或繼承關(guān)系。
3、相鄰的盒模型中，如果其中的一個(gè)是浮動(dòng)的（float），垂直margin不會(huì)重疊，并且浮動(dòng)的盒模型和它的子元素之間也是這樣。
4、設(shè)置了overflow屬性的元素和它的子元素之間的margin不被重疊（overflow取值為visible除外）。
5、設(shè)置了絕對(duì)定位（position:absolute）的盒模型，垂直margin不會(huì)被重疊，并且和他們的子元素之間也是一樣。
6、設(shè)置了display:inline-block的元素，垂直margin不會(huì)重疊，甚至和他們的子元素之間也是一樣。
7、如果一個(gè)盒模型的上下margin相鄰，這時(shí)它的margin可能重疊覆蓋（collapse through）它。在這種情況下，元素的位置（position）取決于它的相鄰元素的margin是否重疊。
a、如果元素的margin和它的父元素的margin-top重疊在一起，盒模型border-top的邊界定義和它的父元素相同。
b、另外，任意元素的父元素不參與margin的重疊，或者說只有父元素的margin-bottom是參與計(jì)算的。如果元素的border-top非零，那么元素的border-top邊界位置和原來一樣。
一個(gè)應(yīng)用了清除操作的元素的margin-top絕不會(huì)和它的塊級(jí)父元素的margin-bottom重疊。
注意，那些已經(jīng)被重疊覆蓋的元素的位置對(duì)其他已經(jīng)重疊的元素的位置沒有任何影響；只有在對(duì)這些元素的子元素定位時(shí)，border-top邊界位置才是必需的。
8、根元素的垂直margin不會(huì)被重疊。
外邊距(margin)重疊示例
外邊距重疊是指兩個(gè)垂直相鄰的塊級(jí)元素，當(dāng)上下兩個(gè)邊距相遇時(shí)，起外邊距會(huì)產(chǎn)生重疊現(xiàn)象，且重疊后的外邊距，等于其中較大者。
圖示：
另一個(gè)重疊現(xiàn)象是當(dāng)一個(gè)元素包含在另一個(gè)元素之中時(shí)，子元素與父元素之間也會(huì)產(chǎn)生重疊現(xiàn)象，重疊后的外邊距，等于其中最大者：
同理，如果一個(gè)無內(nèi)容的空元素，其自身上下邊距也會(huì)產(chǎn)生重疊。
?
外邊距重疊的意義
外邊距的重疊只產(chǎn)生在普通流文檔的上下外邊距之間，這個(gè)看起來有點(diǎn)奇怪的規(guī)則，其實(shí)有其現(xiàn)實(shí)意義。設(shè)想，當(dāng)我們上下排列一系列規(guī)則的塊級(jí)元素（如段落P）時(shí)，那么塊元素之間因?yàn)橥膺吘嘀丿B的存在，段落之間就不會(huì)產(chǎn)生雙倍的距離。
?
案例：如下圖，父元素沒有設(shè)置margin-top，而子元素設(shè)置了margin-top：20px;可以看出，父元素也一起有了邊距。
?
Document
此部分是能更容易看出讓下面的塊的margin-top。
子元素
margin-top:20px;
父元素
沒有設(shè)置margin-top
?
解決這個(gè)辦法：父元素設(shè)置padding-top:20px 或者設(shè)置 overflow:hidden，子元素取消margin-top:20px;
?
防止外邊距重疊解決方案：
? ? ? ? ?雖然外邊距的重疊有其一定的意義，但有時(shí)候我們?cè)谠O(shè)計(jì)上卻不想讓元素之間產(chǎn)生重疊，那么可以有如下幾個(gè)建議可供參考：
以上建議可根據(jù)實(shí)際情況來采取。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/1020.html
摘要：什么是塊格式化上下文，是頁面的可視化渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。直譯過來是格式化上下文，它是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。 showImg(https://segmentfault.com/img/remote/1460000019193678); 在進(jìn)行html布局及cs...
摘要：什么是塊格式化上下文，是頁面的可視化渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。直譯過來是格式化上下文，它是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。 showImg(https://segmentfault.com/img/remote/1460000019193678); 在進(jìn)行html布局及cs...
摘要：盒模型概念盒子模型又稱框模型，包含了元素內(nèi)容內(nèi)邊距邊框外邊距幾個(gè)要素。盒子垂直方向的距離由決定。屬于同一個(gè)的兩個(gè)相鄰盒子垂直方向的會(huì)發(fā)生重疊。計(jì)算高度時(shí)，自然也會(huì)檢測浮動(dòng)的子盒子高度。總寬度總高度盒子設(shè)置的值其實(shí)是除外的的總寬度。 css盒模型概念 css盒子模型又稱框模型 (Box Model) ，包含了元素內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊...
摘要：今天跟大家分享一下中一些比較重要和比較容易被忽略的東西，開始吧。當(dāng)為時(shí)，塊級(jí)元素的寬度會(huì)填滿整個(gè)包含塊。也就是說上下外邊距的值也是以父元素的寬度為標(biāo)準(zhǔn)的。 今天跟大家分享一下CSS中一些比較重要和比較容易被忽略的東西，開始吧。 樣式優(yōu)先級(jí) 當(dāng)你在不同地方不同的選擇器中對(duì)同一個(gè)元素屬性添加了不同的樣式的時(shí)候，該如何判斷最后哪個(gè)樣式會(huì)作用到元素上呢？判斷的依據(jù)就是樣式的優(yōu)先級(jí)。樣式優(yōu)先...
閱讀 901·2021-09-22 15:17
閱讀 1924·2021-09-22 15:06
閱讀 2222·2021-09-08 09:35
閱讀 5109·2021-09-01 11:43
閱讀 3483·2019-08-30 15:55
閱讀 2156·2019-08-30 12:48
閱讀 3157·2019-08-30 12:45
閱讀 1787·2019-08-29 17:31
