成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS盒子模型中外邊距（margin）折疊詳解

genefy / 3069人閱讀

摘要：盒子模型中外邊距折疊的常見情形有如下種情況無子元素的相鄰兄弟元素觸發(fā)折疊的條件兩個(gè)元素之間沒有被其他非空元素隔開時(shí)觸發(fā)外邊距折疊。

最近寫項(xiàng)目過程中遇到一個(gè)CSS盒子模型中外邊距（margin）折疊的情況，搞得我焦頭爛額，之后再網(wǎng)上查閱了大量的資料，現(xiàn)做一個(gè)整理和總結(jié)，方便以后忘記的時(shí)候查閱，同時(shí)也供廣大網(wǎng)友參考。如有錯(cuò)誤或者總結(jié)方面不全的地方，歡飲廣大網(wǎng)友指出。

外邊距折疊的概念：所謂外邊距折疊就是相鄰的兩個(gè)或多個(gè)元素（含有子元素的情況）的外邊距會(huì)在垂直方向上合并成一個(gè)一個(gè)外邊距。

CSS盒子模型中外邊距（margin）折疊的常見情形有如下2種：

情況1、無子元素的相鄰兄弟元素

觸發(fā)margin折疊的條件：兩個(gè)元素之間沒有被其他非空元素隔開時(shí)觸發(fā)外邊距折疊。

情形說明：
1）如果兩個(gè)元素的margin均為正值，則兩個(gè)元素之間的margin=max(margin1,margin2)；
附圖說明：

2）如兩個(gè)元素的margin負(fù)值，則兩者之間的margin=min(margin1,magin2)，如圖2 所示;
附圖說明：

3）如果兩個(gè)元素中有margin為正值，有一個(gè)為負(fù)值，則兩者之間的margin=margin1+margin2，如圖三中所示margin=-50px+25px=-25px;

情況2、子元素與父元素發(fā)生外邊距折疊

觸發(fā)條件：父元素?zé)o外邊框(border)、無內(nèi)邊距(padding)，且父元素與子元素之間無非空元素或文本信息時(shí)（子元素上邊與父元素上邊之間無非空元素文本信息，子元素下邊與父元素下邊之間可可以有非空元素和文本信息），折疊的基線為父元素最上的邊或最下的邊。
情形說明：
1）若父元素與子元素的margin值均為正，則折疊后的margin=max(margin1,margin2)，如圖四所示。
附圖說明：

2）若父元素與子元素的margin值均為負(fù)，則折疊后的margin=min(margin1,margin2)，如圖五所示。

3）若父元素與子元素的margin其中有一個(gè)為正值，一個(gè)為負(fù)值，則折疊后的margin=minmargin1+margin2，如圖六所示。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112368.html

相關(guān)文章

  • CSS盒子模型中外邊距（margin）折疊詳解

    摘要：盒子模型中外邊距折疊的常見情形有如下種情況無子元素的相鄰兄弟元素觸發(fā)折疊的條件兩個(gè)元素之間沒有被其他非空元素隔開時(shí)觸發(fā)外邊距折疊。 最近寫項(xiàng)目過程中遇到一個(gè)CSS盒子模型中外邊距（margin）折疊的情況，搞得我焦頭爛額，之后再網(wǎng)上查閱了大量的資料，現(xiàn)做一個(gè)整理和總結(jié)，方便以后忘記的時(shí)候查閱，同時(shí)也供廣大網(wǎng)友參考。如有錯(cuò)誤或者總結(jié)方面不全的地方，歡飲廣大網(wǎng)友指出。 外邊距折疊的概念：所...

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

  • CSS概念【記錄】

    摘要：語法規(guī)則注釋層疊優(yōu)先級(jí)繼承值塊格式化上下文盒模型層疊上下文可替換元素外邊距合并包含塊視覺格式化模型布局模式語法屬性值聲明聲明塊規(guī)則規(guī)則集規(guī)則規(guī)則一個(gè)語句定義樣式表使用的字符集告訴引擎引入一個(gè)外部樣式表嵌套規(guī)則如果滿足媒介查詢的條件則條件規(guī)則 1、CSS語法 2、@規(guī)則 3、注釋 4、層疊 5、優(yōu)先級(jí) 6、繼承 7、值 8、塊格式化上下文 9、盒模型 10、層疊上下文 11、可替換元素 12、...

    番茄西紅柿 評(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)典的老問題，因?yàn)橹皠偤糜凶x者朋友問到，順便整理一下。 從一個(gè)簡(jiǎn)單例子說起 先看一個(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)典的老問題，因?yàn)橹皠偤糜凶x者朋友問到，順便整理一下。 從一個(gè)簡(jiǎn)單例子說起 先看一個(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)典的老問題，因?yàn)橹皠偤糜凶x者朋友問到，順便整理一下。 從一個(gè)簡(jiǎn)單例子說起 先看一個(gè)簡(jiǎn)單示例： `` `.sli...

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

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

0條評(píng)論

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