欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時(shí)間：2018-10-30 15:21:07   作者：安歌   我要評(píng)論
外邊距折疊指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會(huì)合并成一個(gè)外邊距，本文詳細(xì)的介紹了一下css外邊距折疊的實(shí)現(xiàn)，分為3種情況，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

前文

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

從一個(gè)簡單例子說起

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

<style>
    .slide1 div {
      margin:10px 0;
    }
  </style>
 <div class="slide1">
    <h3>第1種外邊距折疊：兄弟元素</h3>
    <p>文本上下間距10px</p>
    <p>文本上下間距10px</p>
  </div>

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

分類情況

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

  1. 相鄰元素
  2. 父元素和第一個(gè)子元素（或者最后一個(gè)子元素，等下記得回頭思考下這里為啥是第一個(gè)或者最后一個(gè)）
  3. 空的塊級(jí)元素

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

第二種和第三種情況如下：


<style>
    .father {
      background-color: green;

    }
    .child {
      margin-top: 50px;
      background-color: red;
      height: 300px;
    }
    
      .slide3 {
      margin: 10px 0;
    }
  </style>
  <h3>第2種外邊距折疊：父元素和首個(gè)子元素</h3>
  <div class="slide2 father">
    <!-- 父元素是綠色 -->
    <div class="slide2 child">
      <!-- 子元素是紅色 -->
    </div>
  </div>
  <h3>第3種外邊距折疊：空的塊級(jí)元素</h3>
  <div class="slide3"></div>

他們的圖像也分別如圖：

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

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

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

如何理解直接接觸？很簡單：

  • 第一個(gè)例子中，兩個(gè)<p>標(biāo)簽的垂直方向margin是直接接觸的；
  • 第二個(gè)例子中，由于父元素的padding,border都為0，所以margin和它的子元素也是直接接觸的。（這個(gè)例子畫出盒模型就很好理解）
  • 第三個(gè)例子中，空元素本身的上下邊距也是直接接觸的（padding,border也是0）

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

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

  • 如果兩個(gè)外邊距都是正值，折疊后的邊距取較大的一個(gè)
  • 如果兩個(gè)邊距一正一負(fù)，折疊后的邊距為邊距之和
  • 如果兩個(gè)邊距都為負(fù)數(shù)，折疊后邊距為較小的邊距之和

如何防止外邊距折疊

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

  • 嵌套情況只要border padding 非0，或者有inline元素隔開，比如父元素里加一行文字也可以（可以直接在情況2嘗試）
  • 任何借助bfc形成阻隔的方式，如浮動(dòng)，display:table等（BFC不熟悉的同學(xué)先查查，我后面補(bǔ)上）

小結(jié)

還得補(bǔ)充一下，前面討論的是基本情況，在基本情況下還可以進(jìn)行組合，比如多個(gè)相鄰元素之間；多層后代元素嵌套等等，弄明白基本原理，其他情況只要寫寫小的demo驗(yàn)證下就很好理解了。然后是慣例：如果內(nèi)容有錯(cuò)誤的地方歡迎指出（覺得看著不理解不舒服想吐槽也完全沒問題）；

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

原文地址：https://segmentfault.com/a/1190000016842993

相關(guān)文章

  • CSS實(shí)現(xiàn)單選折疊菜單功能

    今天教大家用純css實(shí)現(xiàn)一個(gè)單選的折疊菜單，不需要JavaScript就能用。折疊菜單和標(biāo)簽頁差不多，邏輯上都是一種單選面板，只不過折疊菜單一般是垂直堆疊的，標(biāo)簽頁是橫著排
    2021-10-26

  • CSS 實(shí)現(xiàn) 圖片鼠標(biāo)懸停折疊效果

    這篇文章主要介紹了CSS 實(shí)現(xiàn) 圖片鼠標(biāo)懸停折疊效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-09-21

  • 詳解CSS外邊距折疊引發(fā)的問題

    這篇文章主要介紹了詳解CSS外邊距折疊引發(fā)的問題的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-02-27

  • 純CSS實(shí)現(xiàn)可折疊樹狀菜單

    這篇文章主要介紹了純CSS實(shí)現(xiàn)可折疊樹狀菜單，不用js讓你體會(huì)到css的強(qiáng)大,需要的朋友可以參考下
    2018-04-17

  • 通過HTML+CSS實(shí)現(xiàn)折疊樣式完整代碼

    這篇文章主要介紹了通過HTML+CSS實(shí)現(xiàn)折疊樣式完整代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-04-03

最新評(píng)論