国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css外邊距折疊（margin collapsing）

xinhaip / 2374人閱讀

摘要：前文這是的一個(gè)經(jīng)典的老問(wèn)題，因?yàn)橹皠偤糜凶x者朋友問(wèn)到，順便整理一下。這個(gè)例子就是外邊距折疊塊級(jí)元素的上外邊距和下外邊距有時(shí)會(huì)合并或折疊為一個(gè)外邊距。

前文

這是的一個(gè)經(jīng)典的老問(wèn)題，因?yàn)橹皠偤糜凶x者朋友問(wèn)到，順便整理一下。

從一個(gè)簡(jiǎn)單例子說(shuō)起

先看一個(gè)簡(jiǎn)單示例：

 
 

    
第1種外邊距折疊：兄弟元素

    
文本上下間距10px

    
文本上下間距10px


看這個(gè)例子中的兩個(gè)p標(biāo)簽，根據(jù)樣式定義：第一個(gè)p的margin-bottom和第二個(gè)p的margin-top 都是10px，那實(shí)際距離應(yīng)該等于20px才對(duì)，但是用瀏覽器查看一下可以發(fā)現(xiàn)，最終的邊距是10px。 這個(gè)例子就是外邊距折疊：塊級(jí)元素的上外邊距和下外邊距有時(shí)會(huì)合并（或折疊）為一個(gè)外邊距。

分類情況

外邊距折疊有3種基本情況：

相鄰元素

父元素和第一個(gè)子元素（或者最后一個(gè)子元素，等下記得回頭思考下這里為啥是第一個(gè)或者最后一個(gè)）

空的塊級(jí)元素

先不急著記憶，首先，前文的例子中就是第一種情況--相鄰的兩個(gè)元素之間發(fā)生的外邊距折疊。
第二種情況如下：

 
  
第2種外邊距折疊：父元素和首個(gè)子元素

如圖：

情況2： 子元素的外邊距會(huì)“轉(zhuǎn)移”到父元素的外面

第三種稍微有點(diǎn)特殊，必須添加一個(gè)輔助的塊級(jí)元素才能看到空元素的折疊情況(原文這里有遺漏，感謝評(píng)論區(qū)摩天大樓的指出)，如下：




    
第3種外邊距折疊：空的塊級(jí)元素

    

    
這是用來(lái)檢測(cè)slide3已經(jīng)折疊的輔助元素

情況3：該元素的上下外邊距會(huì)折疊

好了，到這里我們不妨來(lái)看看這幾種情況的共同點(diǎn)（建議畫(huà)一下他們的盒模型，我懶就不畫(huà)了-_-）,可以發(fā)現(xiàn)發(fā)生外邊距折疊的共同原因：margin之間直接接觸，沒(méi)有阻隔。

如何理解直接接觸？很簡(jiǎn)單：

第一個(gè)例子中，兩個(gè)

標(biāo)簽的垂直方向margin是直接接觸的；

第二個(gè)例子中，由于父元素的padding,border都為0，所以margin和它的子元素也是直接接觸的。（這個(gè)例子畫(huà)出盒模型就很好理解）

第三個(gè)例子中，空元素本身的上下邊距也是直接接觸的（padding,border也是0）

各種情況下折疊的結(jié)果

折疊后的邊距如何計(jì)算，這個(gè)可以簡(jiǎn)單驗(yàn)證下：

如果兩個(gè)外邊距都是正值，折疊后的邊距取較大的一個(gè)

如果兩個(gè)邊距一正一負(fù)，折疊后的邊距為邊距之和

如果兩個(gè)邊距都為負(fù)數(shù)，折疊后邊距為較小的邊距之和

如何防止外邊距折疊

前文說(shuō)到，發(fā)生外邊距折疊的原因是，外邊距直接接觸，因此防止折疊的方式就是，阻隔這個(gè)直接接觸，組合的方法包括：

嵌套情況只要border padding 非0，或者有inline元素隔開(kāi)，比如父元素里加一行文字也可以（可以直接在情況2嘗試）

任何借助bfc形成阻隔的方式，如浮動(dòng)，display:table等（BFC不熟悉的同學(xué)先查查，我后面補(bǔ)上）

小結(jié)

還得補(bǔ)充一下，前面討論的是基本情況，在基本情況下還可以進(jìn)行組合，比如多個(gè)相鄰元素之間；多層后代元素嵌套等等，弄明白基本原理，其他情況只要寫(xiě)寫(xiě)小的demo驗(yàn)證下就很好理解了。然后是慣例：如果內(nèi)容有錯(cuò)誤的地方歡迎指出（覺(jué)得看著不理解不舒服想吐槽也完全沒(méi)問(wèn)題）；如果對(duì)你有幫助，歡迎點(diǎn)贊和收藏，轉(zhuǎn)載請(qǐng)征得同意后著明出處，如果有問(wèn)題也歡迎私信交流，主頁(yè)有郵箱地址

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114125.html

相關(guān)文章

  • 深入CSS之外邊距折疊(margin collapse)詳解

    摘要：發(fā)生外邊距折疊的條件是什么垂直方向上相鄰的兩個(gè)元素這種情況很好理解，就是上面的例子中給出的情況。外邊距折疊后的大小兩個(gè)相同大小的正數(shù)取某個(gè)外邊距的值。即與發(fā)生折疊，折疊后的值為。根據(jù)塊級(jí)格式化上下文來(lái)阻止外邊距折疊。 什么是外邊距折疊 準(zhǔn)確來(lái)說(shuō)，外邊距折疊應(yīng)該叫垂直外邊距折疊，因?yàn)橹粫?huì)發(fā)生在垂直方向上，而水平方向上不會(huì)發(fā)生。 對(duì)于以下簡(jiǎn)單的html代碼和css代碼， 請(qǐng)問(wèn)top塊和bo...

    ctriptech 評(píng)論0 收藏0

  • 詳解css外邊距折疊（margin collapsing）

    摘要：這個(gè)例子就是外邊距折疊塊級(jí)元素的上外邊距和下外邊距有時(shí)會(huì)合并或折疊為一個(gè)外邊距。 外邊距折疊指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會(huì)合并成一個(gè)外邊距，本文詳細(xì)的介紹了一下css外邊距折疊的實(shí)現(xiàn)，分為3種情況，非常具有實(shí)用價(jià)值，需要的朋友可以參考下 前文 這是的一個(gè)經(jīng)典的老問(wèn)題，因?yàn)橹皠偤糜凶x者朋友問(wèn)到，順便整理一下。 從一個(gè)簡(jiǎn)單例子說(shuō)起 先看一個(gè)簡(jiǎn)單示例： `` `.sli...

    孫吉亮 評(píng)論0 收藏0

  • 詳解css外邊距折疊（margin collapsing）

    摘要：這個(gè)例子就是外邊距折疊塊級(jí)元素的上外邊距和下外邊距有時(shí)會(huì)合并或折疊為一個(gè)外邊距。 外邊距折疊指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會(huì)合并成一個(gè)外邊距，本文詳細(xì)的介紹了一下css外邊距折疊的實(shí)現(xiàn)，分為3種情況，非常具有實(shí)用價(jià)值，需要的朋友可以參考下 前文 這是的一個(gè)經(jīng)典的老問(wèn)題，因?yàn)橹皠偤糜凶x者朋友問(wèn)到，順便整理一下。 從一個(gè)簡(jiǎn)單例子說(shuō)起 先看一個(gè)簡(jiǎn)單示例： `` `.sli...

    J4ck_Chan 評(píng)論0 收藏0

  • 詳解css外邊距折疊（margin collapsing）

    摘要：這個(gè)例子就是外邊距折疊塊級(jí)元素的上外邊距和下外邊距有時(shí)會(huì)合并或折疊為一個(gè)外邊距。 外邊距折疊指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會(huì)合并成一個(gè)外邊距，本文詳細(xì)的介紹了一下css外邊距折疊的實(shí)現(xiàn)，分為3種情況，非常具有實(shí)用價(jià)值，需要的朋友可以參考下 前文 這是的一個(gè)經(jīng)典的老問(wèn)題，因?yàn)橹皠偤糜凶x者朋友問(wèn)到，順便整理一下。 從一個(gè)簡(jiǎn)單例子說(shuō)起 先看一個(gè)簡(jiǎn)單示例： `` `.sli...

    levy9527 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<