本篇文章帶大家了解一下css 盒模型，介紹一下什么是外邊距折疊？什么情況下會(huì)出現(xiàn)外邊距折疊？并談?wù)劷鉀Q方法。

在 CSS 中，所有的元素都被一個(gè)個(gè)的 “盒子（box）” 包圍著，我們廣泛地使用兩種“盒子” —— 塊級(jí)盒子 (block box) 和 內(nèi)聯(lián)盒子 (inline box)。

什么是 CSS 盒模型？

在 CSS 中，盒模型（box model）是在設(shè)計(jì)和布局時(shí)使用。

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

• Content box: 這個(gè)區(qū)域是用來(lái)顯示內(nèi)容，大小可以通過(guò)設(shè)置 width 和 height.
• Padding box: 包圍在內(nèi)容區(qū)域外部的空白區(qū)域； 大小通過(guò) padding 相關(guān)屬性設(shè)置。
• Border box: 包裹內(nèi)容和內(nèi)邊距。大小通過(guò) border 相關(guān)屬性設(shè)置。
• Margin box: 這是最外面的區(qū)域，是盒子和其他元素之間的空白區(qū)域。大小通過(guò) margin 相關(guān)屬性設(shè)置。

塊級(jí)盒子完整地應(yīng)用了 CSS 盒模型，內(nèi)聯(lián)盒子只使用盒模型中定義的部分內(nèi)容。

box-sizing

box-sizing 屬性定義了瀏覽器應(yīng)該如何計(jì)算一個(gè)元素的總寬度和總高度。

• content-box（默認(rèn)值），即標(biāo)準(zhǔn)盒模型，width: 100px 指的是內(nèi)容區(qū)會(huì)有 100px 寬。
  • 盒子的大小 = content(100px) + padding + border
• border-box，即替代（IE）盒模型，width: 100px 指的是 內(nèi)容區(qū) + 邊框 + 內(nèi)邊距 的總和是 100px 寬。
  • 盒子的大小 = content + padding + border = 100px

display

這里可以補(bǔ)充一個(gè)概念 -- 內(nèi)部和外部顯示類型。

• 外部顯示類型，我們通過(guò)對(duì)盒子 display 屬性的設(shè)置，比如 inline 或者 block ，來(lái)控制盒子的是內(nèi)聯(lián)還是塊級(jí)。
• 內(nèi)部顯示類型，它決定了盒子內(nèi)部元素是如何布局的。

如果設(shè)置 display: flex，在一個(gè)元素上，外部顯示類型是 block，但是內(nèi)部顯示類型修改為 flex。 該盒子的所有直接子元素都會(huì)成為 flex 元素，會(huì)根據(jù) 彈性盒子（Flexbox ）規(guī)則進(jìn)行布局。

還有一個(gè)特殊的值 -- display: inline-block，它在內(nèi)聯(lián)和塊之間提供了一個(gè)中間狀態(tài)。這對(duì)于以下情況非常有用:不發(fā)生換行，但可以設(shè)定寬度和高度，也就是說(shuō)實(shí)現(xiàn)了塊級(jí)的部分效果：

• 設(shè)置 width 和 height 屬性會(huì)生效。
• padding, margin, 以及 border 會(huì)推開(kāi)其他元素。

行內(nèi)元素 / 塊級(jí)元素

HTML4 中，元素被分成兩大類: inline (內(nèi)聯(lián)元素) 與 block (塊級(jí)元素)。

1. 什么是行內(nèi)元素？

一個(gè)行內(nèi)元素只占據(jù)它對(duì)應(yīng)標(biāo)簽的邊框所包含的空間。

常見(jiàn)的行內(nèi)元素有 a、 b、 span、 img、 strong、 sub sup、 button、 input、 label、 select、 textarea

2. 什么是塊級(jí)元素？

塊級(jí)元素占據(jù)其父元素（容器）的整個(gè)空間，因此創(chuàng)建了一個(gè)“塊”。通常瀏覽器會(huì)在塊級(jí)元素前后另起一個(gè)新行。

常見(jiàn)的塊級(jí)元素有 div、ul 、ol、 li、 dl、 dt、 dd、 h1、 h2、 h3、h4 、 h5、h6 、p

3. 區(qū)別？

• 格式上（默認(rèn)情況），行內(nèi)元素不會(huì)換行，而塊級(jí)元素都會(huì)換行。

• 內(nèi)容上（默認(rèn)情況），行內(nèi)元素只能包含數(shù)據(jù)和其他行內(nèi)元素。而塊級(jí)元素可以包含行內(nèi)元素和其他塊級(jí)元素。

• 在屬性上：

  • 行內(nèi)元素
    • width 和 height 設(shè)置無(wú)效（可以設(shè)置 line-height)，
    • 內(nèi)邊距（padding）、外邊距（margin） 和 邊框（border） 在 上下方向 不會(huì)對(duì)其他元素產(chǎn)生影響。
  • 塊級(jí)元素
    • width 和 height 屬性可以發(fā)揮作用，
    • 內(nèi)邊距（padding）、外邊距（margin） 和 邊框（border） 會(huì)將其他元素從當(dāng)前元素周圍“推開(kāi)”

外邊距（margin）折疊

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

什么情況才會(huì)出現(xiàn)

2 個(gè)或多個(gè)毗鄰的的普通流中的塊元素垂直方向上的 margin 會(huì)折疊

• 毗鄰： 是指沒(méi)有被非空內(nèi)容、padding、border 或 clear 分隔開(kāi)
• 垂直方向： 是指只有垂直方向的 margin 才會(huì)

如何解決？

• 創(chuàng)建了 BFC 的元素 和它的子元素/兄弟元素不會(huì)發(fā)生折疊

• 設(shè)置 padding / border ，一些具體的場(chǎng)景：

  • 父元素的 margin-top 和子元素的 margin-top 發(fā)生重疊。

    發(fā)生重疊是因?yàn)樗鼈兪窍噜彽模晕覀兛梢酝ㄟ^(guò)這一點(diǎn)來(lái)解決這個(gè)問(wèn)題。我們可以為父元素設(shè) border-top、padding-top 值來(lái)分隔它們。

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

    發(fā)生重疊一個(gè)是因?yàn)樗鼈兿?鄰，一個(gè)是因?yàn)楦冈氐母叨炔还潭?。因此我們可以為父元素設(shè)置 border-bottom、 padding-bottom 來(lái)分隔它們，也可以為父元素設(shè)置一個(gè)高度，max-height 和 min-height 也能解決這個(gè)問(wèn)題。

  • 是沒(méi)有內(nèi)容的元素，自身的 margin-top 和 margin-bottom 發(fā)生的重疊。

    我們可以通過(guò)為其設(shè)置 border、padding 或者高度來(lái)解決這個(gè)問(wèn)題。

觸發(fā) BFC 的因素

• float（除了 none）
• overflow（除了 visible）
• display（table-cell / table-caption / inline-block）
• position（除了 static / relative）

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程視頻??！

以上就是什么是外邊距折疊？什么情況下出現(xiàn)？怎么解決？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注有啊網(wǎng)站百科其它相關(guān)文章！

• 喜歡（10）
• 不喜歡（3）

本文鏈接：http://www.yongsung168.cn/ask-css/24773.html