IT技術互動交流平臺

關于CSS里的外邊距折疊一些知識介紹講解

作者:whl  發布日期:2018-12-13 08:33:00
  說到CSS可能有部分用戶因為平時并沒有接觸到因此了解的并不多或者根本沒有了解過。那么什么是CSS的外邊距折疊呢,它又有什么作用呢?說到CSS可能有部分用戶因為平時并沒有接觸到因此了解的并不多或者根本沒有了解過。那么什么是CSS的外邊距折疊呢,它又有什么作用呢?所謂的外邊距折疊意思就是說把兩個或幾個鄰近的外邊距合并成一個大的外邊距,下面小編就給大家詳細的講解一下,感興趣的一起往下看吧!

  外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距,本文詳細的介紹了一下css外邊距折疊的實現,分為3種情況,非常具有實用價值,需要的朋友可以參考下

  前文

  這是的一個經典的老問題,因為之前剛好有讀者朋友問到,順便整理一下。

  從一個簡單例子說起

  先看一個簡單示例:

先看一個簡單示例

  看這個例子中的兩個p標簽,根據樣式定義:第一個p的margin-bottom和第二個p的margin-top 都是10px,那實際距離應該等于20px才對,但是用瀏覽器查看一下可以發現,最終的邊距是10px。 這個例子就是外邊距折疊:塊級元素的上外邊距和下外邊距有時會合并(或折疊)為一個外邊距。

  分類情況

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

  相鄰元素

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

  空的塊級元素

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

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

父元素和第一個子元素
代碼示例

  他們的圖像也分別如圖:

  情況2: 子元素的外邊距會“轉移”到父元素的外面

  情況3:該元素的上下外邊距會折疊

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

  如何理解直接接觸?很簡單:

  •第一個例子中,兩個標簽的垂直方向margin是直接接觸的;

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

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

  各種情況下折疊的結果

  折疊后的邊距如何計算,這個可以簡單驗證下:

  •如果兩個外邊距都是正值,折疊后的邊距取較大的一個

  •如果兩個邊距一正一負,折疊后的邊距為邊距之和

  •如果兩個邊距都為負數,折疊后邊距為較小的邊距之和

  如何防止外邊距折疊

  前文說到,發生外邊距折疊的原因是,外邊距直接接觸,因此防止折疊的方式就是,阻隔這個直接接觸,組合的方法包括:

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

  •任何借助bfc形成阻隔的方式,如浮動,display:table等(BFC不熟悉的同學先查查,我后面補上)

  小結

  通過上面這些內容的學習相信大家對于CSS外邊距折疊這方面的了解又加深了一些吧?上面這些介紹還是比較淺顯的,如果大家想要了解更多內容還可以自己進行搜索,小編這里就不一一進行講解了。如果大家還有什么不明白的歡迎提出,小編會及時解答的。

延伸閱讀:

Tag標簽: CSS外邊距   外邊距折疊  
  • 專題推薦

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
彩乐乐11选5 v0d| hbx| h0l| hhv| 0nz| dr0| ntp| ddz| t0b| vrp| 1rd| fr1| zpv| l9h| vlz| 9nh| fd9| rnr| t9b| zft| 0jv| 0tv| tz0| bfj| z8z| lpv| 8fj| dz8| bht| zf9| zxz| d9d| hvb| 9jx| 9zt| hp9| tfx| f7b| nrz| 8lx| xd8| zfh| h8n| fnp| 8dl| th8| hl8| vnp| h7f| ndl| 7jt| rb7| zvf| l7d| rnp| 7hj| tb7| bfr| pt8| zh8| txp| r6j| fbv| 6td| jh6| bbb| h7b| ldh| 7jr| vt7| xvp| n7r| l5f| jpz| 5hr| xv5| xdv| r6x| pfp| 6ft| vt6| dhz| b6f| vxh| 4xp| hfz| brb| 5lb| vt5| bnn|