什麼是外邊距折疊？什麼情況下出現？怎麼解決？

本篇文章帶大家了解CS​​S 盒子模型，介紹一下什麼是外邊距折疊？什麼情況下會出現外邊距折疊？並談談解決方法。

在CSS 中，所有的元素都被一個個的「盒子（box）」 包圍著，我們廣泛地使用兩種「盒子」 —— 區塊級盒子(block box) 和內嵌盒子(inline box)。

什麼是 CSS 盒子模型？

在 CSS 中，盒子模型（box model）是在設計和佈局時使用。

盒子模型的定義可以分成這幾部分：

• Content box: 這個區域是用來顯示內容，大小可以透過設定width 和 height.
• Padding box: 包圍在內容區域外部的空白區域；大小透過 padding 相關屬性設定。
• Border box: 包裹內容與內邊距。大小透過 border 相關屬性設定。
• Margin box: 這是最外面的區域，是盒子和其他元素之間的空白區域。大小透過 margin 相關屬性設定。

區塊級盒子完整地應用了 CSS 盒模型，內嵌盒子只使用盒子模型中定義的部分內容。

box-sizing

#box-sizing 屬性定義了瀏覽器應該如何計算一個元素的總寬度和總高度。

• content-box（預設值），即標準盒子模型，width: 100px 指的是內容區會有100px 寬。
  • 盒子的大小= content(100px) padding border
• border-box，即替代（IE）盒模型，width: 100px 指的是內容區邊框內邊距 的總和是100px 寬。
  • 盒子的大小= content padding border = 100px

##不論那種模型，margin 都是不計入實際大小 —— 當然，它會影響盒子在頁面所佔空間，但是影響的是盒子外部空間。

display

#這裡可以補充一個概念 -- 內部和外部顯示類型。

• 外部顯示類型，我們透過對盒子display 屬性的設置，例如inline 或block ，來控制盒子的是內聯還是塊級。
• 內部顯示類型，它決定了盒子內部元素是如何佈局的。

如果設定display: flex，在一個元素上，外部顯示類型是block，但是內部顯示類型修改為flex。此盒子的所有直接子元素都會成為 flex 元素，會根據 彈性盒子（Flexbox ）規則進行佈局。

也有一個特殊的值 -- display: inline-block#，它在內聯和區塊之間提供了一個中間狀態。這對於以下情況非常有用:不發生換行，但可以設定寬度和高度，也就是說實現了區塊級的部分效果：

設定
• width 和height 屬性會生效。
• padding, margin, 以及 border 會推開其他元素。

行內元素/ 區塊級元素

inline (內嵌元素) 與block (區塊級元素)。

1. 什麼是行內元素？

a、 b、 span、 img、 strong、 sub sup、 button、 input、 label、 select、 textarea

2. 什麼是區塊級元素？

div、ul 、ol、 li、 dl、 dt、 dd、 h1、 h2、 h3、h4 、 h5、h6 、p

3. 區別？

• 格式上（預設），行內元素不會換行，而區塊級元素都會換行。

• 內容上（預設），行內元素只能包含資料和其他行內元素。而區塊級元素可以包含行內元素和其他區塊級元素。

• 在屬性上：

  • #行內元素
    • width 和height 設定無效（可以設定line-height)，
    • 內邊距（padding）、外邊距（margin）和邊框（border） 在上下方向 不會對其他元素產生影響。
  • 區塊級元素
    • width 和height 屬性可以發揮作用，
    • 內邊距（padding）、外邊距（margin） 和邊框（border） 會將其他元素從目前元素周圍“推開”

#外邊距（margin）摺疊

區塊的上外邊距(margin-top)和下外邊距(margin-bottom)有時合併(折疊)為單一邊距，其大小為單一邊距的最大值​​(或如果它們相等，則僅為其中一個)，這種行為稱為邊距折疊。

什麼情況才會出現

2 個或多個毗鄰的的普通流中的塊元素垂直方向上的margin 會折疊

• 鄰近： 是指沒有被非空內容、padding、border 或clear 分隔開
• 垂直方向： 是指只有垂直方向的margin 才會

如何解決？

• 創建了BFC 的元素 和它的子元素/兄弟元素不會發生折疊

• 設定padding / border ，一些具體的場景：

  • 父元素的margin-top 和子元素的margin-top 發生重疊。

    發生重疊是因為它們是相鄰的，所以我們可以透過這一點來解決這個問題。我們可以為父元素設 border-top、padding-top 值來分隔它們。

  • 高度為 auto 的父元素的 margin-bottom 和子元素的 margin-bottom 發生重疊。

    發生重疊一個是因為它們相 鄰，一個是因為父元素的高度不固定。因此我們可以為父元素設定border-bottom、 padding-bottom 來分隔它們，也可以為父元素設定一個高度，max-height 和min-height 也能解決這個問題。

  • 是沒有內容的元素，本身的 margin-top 和 margin-bottom 發生的重疊。

    我們可以透過為其設定 border、padding 或高度來解決這個問題。

觸發BFC

• float
• ##float （除了none）
• overflow（除了visible）

（table-cell / table-caption / inline-block）

以上是什麼是外邊距折疊？什麼情況下出現？怎麼解決？的詳細內容。更多資訊請關注PHP中文網其他相關文章！