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

資訊專欄INFORMATION COLUMN

「CSS」Margin Collapsing - 外邊距合并

cheukyin / 1589人閱讀

摘要：外邊距合并都是基于以下三種基本的外邊距合并?？赵厮约旱纳贤膺吘嗪拖峦膺吘嗪喜⒘恕Ｗ柚雇膺吘嗪喜⒌诙N情況不合并設(shè)置不為都可。

外邊距合并在排版上帶來(lái)非常大的便利，但是人們對(duì)其不甚了解，導(dǎo)致使用外邊距的時(shí)候總是出現(xiàn)繁多問(wèn)題，今日寫下一片文章，總結(jié)一下外邊距合并。

三種基本的外邊距合并

只有上外邊距和下外邊距才會(huì)觸發(fā)外邊距合并，左外邊距和右外邊距不會(huì)。外邊距合并都是基于以下三種基本的外邊距合并。

1. 相鄰的同胞元素

我們考慮兩個(gè)連續(xù)的 div，他們的上下左右的邊距都是 50px。此時(shí)，第一個(gè)區(qū)域的下外邊距 和 第二個(gè)區(qū)域的上外邊距 合并，故他們的間隔是 50px。

2. 父元素與子元素

第一個(gè)子元素的上外邊距和父元素的上外邊距會(huì)進(jìn)行合并

最后一個(gè)子元素的下外邊距和父元素的下外邊距會(huì)進(jìn)行合并

合并的視覺效果就是這些合并的外邊距 表現(xiàn)為父元素的外邊距。

我們使用一個(gè)有顏色區(qū)域包含另外一個(gè)不同顏色的區(qū)域。里面的區(qū)域所有的外邊距設(shè)為50px。

我們可以看到， margin-box 的左邊和右邊都展示為 #cccdd1, 而由于上邊和下邊的外邊距和父元素的合并了，并表示為父元素的外邊距，故顏色為父元素的父元素的背景色（若又發(fā)生合并，遞推即可）。

細(xì)心的讀者會(huì)發(fā)現(xiàn)，我并沒有設(shè)置父元素的 margin，何來(lái)合并一說(shuō)？
這是因?yàn)楫?dāng) margin 為 0 的時(shí)候也會(huì)發(fā)生合并。
3. 空元素

它自己的上外邊距和下外邊距合并了?！?°ˊДˋ°) °

阻止外邊距合并 第二種情況不合并

設(shè)置 overflow: hidden;（不為 visible 都可）。

由于 margin 需要直接接觸才能夠合并，根據(jù)盒子模型，我們可以設(shè)置父元素的 邊框 或 內(nèi)邊距，或者使用某些元素將第一個(gè)元素和父元素隔開（那就不是第一個(gè)元素了）。

三種情況都不合并

只有在靜態(tài)流的元素才會(huì)發(fā)生外邊距合并，故設(shè)置 float, position: absolute; 都可以使得外邊距在何種情況都不合并。

inline-block 是個(gè)例外，它既沒有脫離文檔流，但是它的所有的外邊距都不會(huì)合并。

DEMO

聽說(shuō)技術(shù)文章和 DEMO 更配噢～
git clone https://github.com/JasonKid/fezone.git 搜索 Margin Collapsing

記得點(diǎn)贊... (╯‵□′)╯︵ ┴─┴

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

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

相關(guān)文章

  • 詳解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

  • css外邊距折疊（margin collapsing）

    摘要：前文這是的一個(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)單示例： .slide1 p { margin:10px 0; } 第1種外邊距折...

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

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

0條評(píng)論

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