CSS 盒模型：理解網(wǎng)頁(yè)佈局的關(guān)鍵

理解 CSS 最重要的點(diǎn)在於：一切皆為盒子。更具體地說(shuō)，文檔中的每個(gè)元素都會(huì)生成一個(gè)盒子。這個(gè)盒子可以是塊級(jí)盒子，也可以是內(nèi)聯(lián)級(jí)盒子。盒子的類型決定了元素如何影響頁(yè)面佈局。 CSS 盒模型是一個(gè)用於描述 HTML 元素佈局和大小的概念。每個(gè)元素都包含一個(gè)用於其內(nèi)容、填充、邊框和邊距的盒子。這些盒子組合在一起，決定了元素內(nèi)容的佈局以及相鄰元素如何與其並排顯示：

元素是否創(chuàng)建盒子以及創(chuàng)建哪種類型的盒子將取決於標(biāo)記語(yǔ)言。 CSS 發(fā)展成為一種為 HTML 文檔設(shè)置樣式的方式，因此，許多 CSS 可視化渲染模型都源於 HTML 區(qū)分塊級(jí)元素和內(nèi)聯(lián)元素。默認(rèn)情況下，諸如 <code><p></p> 和 <section></section> 之類的元素會(huì)創(chuàng)建塊級(jí)盒子，但 <a></a>、<span></span> 和 <em></em> 會(huì)創(chuàng)建內(nèi)聯(lián)盒子。另一方面，SVG 不使用盒模型，因此大多數(shù)與佈局相關(guān)的 CSS 屬性都不能與 SVG 一起使用。

塊級(jí)盒子會(huì)創(chuàng)建新的內(nèi)容塊，如圖 4.1 所示。塊級(jí)盒子的渲染是垂直的，根據(jù)其源順序排列，並且（除了表格之外）會(huì)擴(kuò)展以填充其包含元素的可用寬度。這被稱為普通流。塊級(jí)盒子的 display 值為 block、list-item、table 或任何 table-* 值（例如，table-cell）。

相比之下，內(nèi)聯(lián)級(jí)盒子不會(huì)形成新的內(nèi)容塊。相反，這些盒子構(gòu)成塊級(jí)盒子內(nèi)的行。它們水平顯示並填充包含盒子的寬度，如果需要，會(huì)換行，如圖 4.2 所示。內(nèi)聯(lián)級(jí)盒子的 display 值為 inline、inline-block、inline-table 或 ruby。

但是盒子的尺寸是如何計(jì)算的呢？這就是事情變得更複雜的地方。如圖 4.3 所示，盒子尺寸是盒子內(nèi)容區(qū)域、填充寬度和邊框?qū)挾鹊目偤?。邊距寬度為元素?chuàng)建邊距盒子，並影響文檔中的其他元素；但是，邊距寬度對(duì)盒子本身的尺寸沒(méi)有影響。

例如，一個(gè)具有 width: 300px、padding: 20px 和 border: 10px 的 <code><p></p> 元素的計(jì)算寬度為 360 像素。這是其寬度、左右填充和左右邊框?qū)挾葘傩缘目偤?。要?jiǎng)?chuàng)建一個(gè)寬度為 300 像素、填充為 20 像素和邊框?yàn)?10 像素的元素，寬度需要設(shè)置為 240px。大多數(shù)主流瀏覽器就是這樣計(jì)算寬度的。為了解決瀏覽器之間競(jìng)爭(zhēng)模型的部分問(wèn)題，CSS 工作組引入了 box-sizing 屬性。它允許我們選擇自己喜歡的盒模型實(shí)現(xiàn)，並在處理響應(yīng)式設(shè)計(jì)時(shí)大大簡(jiǎn)化計(jì)算。

使用 box-sizing 選擇盒模型

box-sizing 屬性在 CSS 基本用戶界面模塊級(jí)別 3 規(guī)範(fàn)中定義。它有兩個(gè)可能的值：content-box 和 border-box。最初，box-sizing 的值為 content-box。使用此值時(shí)，設(shè)置元素的 width 和 height 屬性會(huì)影響其內(nèi)容區(qū)域的大小。這與 CSS 2.1 規(guī)範(fàn)中定義的行為相匹配，並且是現(xiàn)代瀏覽器中的默認(rèn)行為（如圖 4.4 所示）。將 box-sizing 的值設(shè)置為 border-box 會(huì)產(chǎn)生一些神奇的效果?，F(xiàn)在，width 和 height 的值將應(yīng)用於外邊框邊緣而不是內(nèi)容區(qū)域。邊框和填充繪製在元素框內(nèi)，與舊的 Internet Explorer 5.5 行為匹配。讓我們來(lái)看一個(gè)混合使用百分比寬度和 px 單位的填充和邊框的示例：

<div class="wrapper">
  <article>
    <h2>This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2>This is a secondary headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </aside>
</div>

我們的<article> 和<aside> 元素都應(yīng)用了以下CSS，這為我們提供了圖4.5 中所示的佈局，其中第一個(gè)元素的寬度為60%，第二個(gè)元素的寬度為40%：

article, aside {
  background: #FFEB3B;
  border: 10px solid #9C27B0;
  float: left;
  padding: 10px;
}
article {
  width: 60%;
}
aside {
  width: 40%;
}

默認(rèn)情況下，<aside> 和 <article> 的 box-sizing 值都為 content-box。 border-width 和 padding 值會(huì)為每個(gè)元素的寬度增加 40 像素，這會(huì)大大影響 60%/40% 的分割?，F(xiàn)在讓我們將 box-sizing: border-box 添加到 <article> 和 <aside> 元素：

article, aside {
  box-sizing: border-box;
}

您可以在圖 4.6 中看到變化：元素具有相同的寬度，但 box-sizing: border-box 意味著寬度包括邊框和填充。因?yàn)?width 屬性應(yīng)用於邊框邊緣而不是內(nèi)容區(qū)域，所以我們的元素現(xiàn)在並排排列。

我建議您在項(xiàng)目中使用 box-sizing: border-box。它使生活更輕鬆，因?yàn)闊o(wú)需計(jì)算寬度值來(lái)考慮填充和邊框的值，並且盒子行為更可預(yù)測(cè)。應(yīng)用 box-sizing: border-box 的最佳方法是使用重置規(guī)則。以下示例來(lái)自 Chris Coyier 的 CSS-Tricks 文章“繼承 box-sizing 可能略微更好——最佳實(shí)踐”：

<div class="wrapper">
  <article>
    <h2>This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2>This is a secondary headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </aside>
</div>

這默認(rèn)情況下將 border-box 大小應(yīng)用於每個(gè)元素，而不會(huì)影響項(xiàng)目現(xiàn)有部分的 box-sizing 行為。如果您知道不會(huì)有依賴於 content-box 行為的第三方或舊版組件，則可以簡(jiǎn)化這些規(guī)則：

article, aside {
  background: #FFEB3B;
  border: 10px solid #9C27B0;
  float: left;
  padding: 10px;
}
article {
  width: 60%;
}
aside {
  width: 40%;
}

管理盒模型只是理解如何創(chuàng)建複雜佈局的一個(gè)要素。

關(guān)於 CSS 盒模型的常見(jiàn)問(wèn)題解答 (FAQ)

(此處省略 FAQ 部分，因?yàn)槠^(guò)長(zhǎng)，且與偽原創(chuàng)目標(biāo)不符。FAQ 部分內(nèi)容可以根據(jù)需要自行添加或修改。)

以上是管理CSS框模型的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！