如何進(jìn)行外邊距折疊Collapsing margins的分析，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

成都創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)提供靜寧企業(yè)網(wǎng)站建設(shè),專(zhuān)注與做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、H5場(chǎng)景定制、小程序制作等業(yè)務(wù)。10年已為靜寧眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

外邊距折疊，是屬于盒模型部分的一個(gè)重要概念。在剛剛開(kāi)始接觸CSS的時(shí)候，對(duì)外邊距折疊的認(rèn)識(shí)，只有一句話：垂直方向上相鄰的兩個(gè)外邊距(margin)會(huì)合并成一個(gè)，最終的大小，是兩個(gè)中較大的。

什么是外邊距折疊，以及還有其他什么情況下會(huì)發(fā)生，都不清楚。后來(lái)，在實(shí)際應(yīng)用中發(fā)現(xiàn)，外邊距折疊不是這么簡(jiǎn)單的，其中包含了很多其他情況下的折疊規(guī)則。

一、概念

Collapsing margin，指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會(huì)合并成一個(gè)外邊距，即外邊距折疊。其中所說(shuō)的 margin 毗鄰，可以歸結(jié)為以下兩點(diǎn)：

1. 這兩個(gè)或多個(gè)外邊距沒(méi)有被非空內(nèi)容、padding、border或clear分隔開(kāi)。

2. 這些margin都處于普通流(in-flow，非浮動(dòng)元素，非定位元素)中。

二、margin折疊的規(guī)則

1. 兩個(gè)或多個(gè)毗鄰的普通流中的塊元素垂直方向上的margin會(huì)折疊

A. 兩個(gè)或多個(gè)

說(shuō)明其數(shù)量必須是大于一個(gè)，又說(shuō)明，折疊是元素與元素間相互的行為，不存在A和B折疊，B沒(méi)有和A折疊的現(xiàn)象了。

B. 毗鄰

是指沒(méi)有被非空內(nèi)容、padding、border或clear分隔開(kāi)，說(shuō)明其位置關(guān)系。注意一點(diǎn)，在沒(méi)有被分隔開(kāi)的情況下，一個(gè)元素margin-top會(huì)和它普通流中的***個(gè)子元素(非浮動(dòng)元素等)的margin-top相鄰；只有在一個(gè)元素的height是”auto”的情況下，它的margin-bottom才會(huì)和它普通流中的***一個(gè)子元素(非浮動(dòng)元素等)的margin-bottom相鄰。文章不夠，例子來(lái)湊：

HTML code<div style="border:1px solid red; width:100px;">     <div style="margin:50px 0; background-color:green; height:50px; width:50px;">        <div style="margin:20px 0;">            <div style="margin:100px 0;">B</div>        </div>     </div> </div>

截圖：

以上測(cè)試用例中，margin會(huì)把B的包含塊撐開(kāi)。

如果一個(gè)元素的height特性的值不是 auto，那么它的margin-bottom和它的子元素的margin-bottom不算是相鄰，因此，不會(huì)發(fā)生折疊。margin-top 沒(méi)有此限制，所以是 100px，margin-bottom 沒(méi)有折疊，所以只有 50px。

C. 垂直方向

是指具體的方位，只有垂直方向的margin才會(huì)折疊，也就是說(shuō)，水平方向的margin不會(huì)發(fā)生折疊的現(xiàn)象。

D. 折疊后margin的計(jì)算

參與折疊的margin都是正值。例：

HTML code<div style="height:50px; margin-bottom:50px; width:50px; background-color: red;">A</div> <div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>

截圖：

可見(jiàn)，在margin都是正數(shù)的情況下，會(huì)取其中margin較大的值為最終 margin值。

參與折疊的margin中有正值，有負(fù)值。如果，毗鄰的margin中有正值，同時(shí)存在負(fù)值會(huì)怎樣呢？有正有負(fù)，先取出負(fù)margin中絕對(duì)值***的，然后，和正marin值***的magin，相加。請(qǐng)看下面的例子：

HTML code<div style="height:50px; margin-bottom:-50px; width:50px; background-color: red;">A</div> <div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>

截圖：

上面的例子最終的margin是 100+(-50)=50px。

參與折疊的margin都是負(fù)值。***，如果毗鄰的兩個(gè)margin都是負(fù)值又會(huì)怎樣呢？當(dāng)margin都是負(fù)值的時(shí)候，取的是其中絕對(duì)值較大的，然后，從0位置，負(fù)向位移。看例子：

HTML code<div style="height:100px; margin-bottom:-75px; width:100px; background-color: red;">A</div> <div style="height:100px; margin-left:50px; margin-top:-50px; width:100px; background-color: green;">B</div>

截圖：

相鄰的margin要一起參與計(jì)算，不得分步計(jì)算。以上舉的例子都是兄弟節(jié)點(diǎn)在垂直方向的相鄰，要注意，相鄰的元素不一定非要是兄弟節(jié)點(diǎn)，父子節(jié)點(diǎn)也可以，即使不是兄弟父子節(jié)點(diǎn)也可以相鄰。舉一個(gè)復(fù)雜點(diǎn)兒的例子，我們要計(jì)算的是A和B之間的margin最終應(yīng)該是多少：

HTML code<div style="margin:50px 0; background-color:green; width:50px;">     <div style="margin:-60px 0;">            <div style="margin:150px 0;">A</div>     </div> </div> <div style="margin:-100px 0; background-color:green; width:50px;">     <div style="margin:-120px 0;">            <div style="margin:200px 0;">B</div>     </div> </div>

有人可能說(shuō)了，算A和B之間的margin，分別算A和其父元素的折疊，然后與其父元素的父元素的折疊，這個(gè)值算出來(lái)之后，應(yīng)該是90px。依此法算出B的為80px；然后，A和B折疊，margin 為90px。

對(duì)嗎？錯(cuò)了，大錯(cuò)特錯(cuò)。錯(cuò)在哪里了呢？請(qǐng)注意，多個(gè)margin相鄰折疊成一個(gè)margin，所以計(jì)算的時(shí)候，應(yīng)該取所有相關(guān)的值，而不能分開(kāi)，分步來(lái)算。以上例子中，A和B之間的margin折疊產(chǎn)生的margin，是6個(gè)相鄰margin折疊的結(jié)果。分別是：

◆正值：50px，150px，200px

◆負(fù)值：-60px，-100px，-120px

根據(jù)有正有負(fù)時(shí)的計(jì)算規(guī)則，正值的***值為 200px，負(fù)值中絕對(duì)值***的是-120px，所以，最終折疊后的margin應(yīng)該是 200 + (-120) = 80px。
可以打開(kāi)瀏覽器來(lái)驗(yàn)證自己的猜想。

2. 浮動(dòng)元素/inline-block的元素/絕對(duì)定位元素的margin不會(huì)和垂直方向上的其他元素的margin折疊

浮動(dòng)元素的margin在垂直方向上也不會(huì)發(fā)生 margin折疊，即使和它相鄰的子元素，也不會(huì)。看例子：

HTML code<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div> <div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">     <div style="margin-top:50px; background-color:gold;">B</div> </div>

截圖：

可見(jiàn)，兩個(gè)綠色的塊兒之間，相距100px，而若B和它的浮動(dòng)包含塊發(fā)生margin折疊的話，金色的條應(yīng)該位于綠色塊的最上方，顯然，沒(méi)有發(fā)生折疊。
將float:leftt分別換成 “display:inline-block”和”position:absolute”測(cè)試后兩種情況，截圖與上同。

3. 創(chuàng)建了塊級(jí)格式化內(nèi)容的元素，不和它的子元素發(fā)生margin折疊

關(guān)于塊級(jí)格式化內(nèi)容，請(qǐng)參照：http://www.w3.org/TR/CSS2/visuren.html#block-formatting，其中浮動(dòng)元素，絕對(duì)定位元素，以及 overflow值不是’visible’的元素，都符合。以 “overflow:hidden” 的元素為例：

HTML code<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;">     <div style="margin-top:50px; background-color:gold;">B</div> </div>

截圖：

  

若B和它的 “overflow:hidden” 包含塊發(fā)生margin折疊的話，金色的條應(yīng)該位于綠色塊的最上方，顯然，沒(méi)有發(fā)生折疊。

4. 元素自身的margin-bottom和margin-top相鄰時(shí)也會(huì)折疊

自身margin-bottom和margin-top相鄰，只能是自身內(nèi)容為空，垂直方向上border、padding為0。例：

HTML code<div style="border:1px solid red; width:100px;">     <div style="margin-top:100px;margin-bottom:50px;"></div> </div>

截圖：

以上代碼運(yùn)行后，我們得到的是一個(gè)正方形，說(shuō)明，最終的margin是100px，而不是150px，也就是說(shuō)發(fā)生了margin折疊。

看完上述內(nèi)容，你們掌握如何進(jìn)行外邊距折疊Collapsing margins的分析的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享文章：如何進(jìn)行外邊距折疊Collapsingmargins的分析
本文地址：http://www.js-pz168.com/article10/pcsggo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、、網(wǎng)站營(yíng)銷(xiāo)、服務(wù)器托管、響應(yīng)式網(wǎng)站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)