解決外邊距margin疊加的方法教程-創(chuàng)新互聯(lián)

這篇文章主要講解了“解決外邊距margin疊加的方法教程”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“解決外邊距margin疊加的方法教程”吧！

創(chuàng)新互聯(lián)公司成立與2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元嫩江做網(wǎng)站,已為上家服務(wù),為嫩江各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

一、首先你要知道什么情況下會(huì)觸發(fā)：兩個(gè)或多個(gè)毗鄰的普通流中的塊元素垂直方向上的 margin 會(huì)折疊

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

2.毗鄰
是指沒有被非空內(nèi)容、padding、border 或 clear 分隔開，說明其位置關(guān)系。
注意一點(diǎn)，在沒有被分隔開的情況下，一個(gè)元素的 margin-top 會(huì)和它普通流中的第一個(gè)子元素(非浮動(dòng)元素等)的 margin-top 相鄰； 只有在一個(gè)元素的 height 是 "auto" 的情況下，它的 margin-bottom 才會(huì)和它普通流中的最后一個(gè)子元素(非浮動(dòng)元素等)的 margin-bottom 相鄰。

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

二、那么如何使元素上下margin不折疊呢？

1.浮動(dòng)元素、inline-block 元素、絕對(duì)定位元素的 margin 不會(huì)和垂直方向上其他元素的 margin 折疊（注意這里指的是上下相鄰的元素）

2.創(chuàng)建了塊級(jí)格式化上下文的元素，不和它的子元素發(fā)生 margin 折疊（注意這里指的是創(chuàng)建了BFC的元素和它的子元素不會(huì)發(fā)生折疊）

我們都知道觸發(fā)BFC的因素是float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline-block）、position（除了static/relative）

很明顯大家可以看出來相鄰元素不發(fā)生折疊的因素是觸發(fā)BFC因素的子集，也就是說如果我為上下相鄰的元素設(shè)置了overflow:hidden，雖然觸發(fā)了BFC，但是上下元素的上下margin還是會(huì)發(fā)生折疊

這個(gè)問題其實(shí)和BFC并沒有太大的關(guān)系，希望大家不要濫用BFC，要知道BFC不是全能，創(chuàng)建BFC的初衷只是為了讓元素本身（包括它的子元素）能夠正確的計(jì)算自己的寬高。

不發(fā)生折疊的觸發(fā)因素是浮動(dòng)元素、inline-block 元素、絕對(duì)定位元素，這個(gè)只是創(chuàng)建BFC因素的子集，但并不能說明創(chuàng)建了BFC的元素就不會(huì)發(fā)生折疊，因?yàn)锽FC還可以用overflow:hidden來創(chuàng)建。相反如果父元素觸發(fā)了BFC，那么他的塊級(jí)子元素反而會(huì)發(fā)生折疊。

克軍提到的最后一個(gè)zoom，這是IE瀏覽器最初支持的縮放屬性，到現(xiàn)在只有新的webkit核心的瀏覽器也支持。但只是在IE8以下的瀏覽器下才可成功觸發(fā)hasLayout，對(duì)于非IE瀏覽器也是沒有效果的，所以還是需要同樣的去創(chuàng)建BFC。

關(guān)于最終如何解決這樣的問題，我的建議是在寫的時(shí)候盡量用同一方向的margin，比如都設(shè)置為top或者bottom，因?yàn)槟阍趯?shí)踐的時(shí)候有時(shí)不需要為每個(gè)元素設(shè)置浮動(dòng)、inline-block或者absolute 。

感謝各位的閱讀，以上就是“解決外邊距margin疊加的方法教程”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)解決外邊距margin疊加的方法教程這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前題目：解決外邊距margin疊加的方法教程-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://bm7419.com/article16/hsjdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、云服務(wù)器、網(wǎng)站設(shè)計(jì)公司、服務(wù)器托管、企業(yè)建站、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)