管理CSS框模型

CSS 盒模型：理解網頁佈局的關鍵

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

元素是否創建盒子以及創建哪種類型的盒子將取決於標記語言。 CSS 發展成為一種為 HTML 文檔設置樣式的方式，因此，許多 CSS 可視化渲染模型都源於 HTML 區分塊級元素和內聯元素。默認情況下，諸如 <code><p></p> 和 <section></section> 之類的元素會創建塊級盒子，但 <a></a>、<span></span> 和 <em></em> 會創建內聯盒子。另一方面，SVG 不使用盒模型，因此大多數與佈局相關的 CSS 屬性都不能與 SVG 一起使用。

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

圖 4.1. 包含元素（灰色區域）內的 h1、p、ul 和 table 元素的塊級盒子

相比之下，內聯級盒子不會形成新的內容塊。相反，這些盒子構成塊級盒子內的行。它們水平顯示並填充包含盒子的寬度，如果需要，會換行，如圖 4.2 所示。內聯級盒子的 display 值為 inline、inline-block、inline-table 或 ruby。

圖 4.2. 應用了 margin: 1em 和 padding: 5px 的內聯盒子的示例

但是盒子的尺寸是如何計算的呢？這就是事情變得更複雜的地方。如圖 4.3 所示，盒子尺寸是盒子內容區域、填充寬度和邊框寬度的總和。邊距寬度為元素創建邊距盒子，並影響文檔中的其他元素；但是，邊距寬度對盒子本身的尺寸沒有影響。

圖 4.3. CSS 2.1 盒模型

例如，一個具有 width: 300px、padding: 20px 和 border: 10px 的 <code><p></p> 元素的計算寬度為 360 像素。這是其寬度、左右填充和左右邊框寬度屬性的總和。要創建一個寬度為 300 像素、填充為 20 像素和邊框為 10 像素的元素，寬度需要設置為 240px。大多數主流瀏覽器就是這樣計算寬度的。為了解決瀏覽器之間競爭模型的部分問題，CSS 工作組引入了 box-sizing 屬性。它允許我們選擇自己喜歡的盒模型實現，並在處理響應式設計時大大簡化計算。

使用 box-sizing 選擇盒模型

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

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

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

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

圖 4.5. 元素使用 box-sizing: content-box

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

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

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

圖 4.6. 元素使用 box-sizing: border-box

我建議您在項目中使用 box-sizing: border-box。它使生活更輕鬆，因為無需計算寬度值來考慮填充和邊框的值，並且盒子行為更可預測。應用 box-sizing: border-box 的最佳方法是使用重置規則。以下示例來自 Chris Coyier 的 CSS-Tricks 文章“繼承 box-sizing 可能略微更好——最佳實踐”：

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

這默認情況下將 border-box 大小應用於每個元素，而不會影響項目現有部分的 box-sizing 行為。如果您知道不會有依賴於 content-box 行為的第三方或舊版組件，則可以簡化這些規則：

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

管理盒模型只是理解如何創建複雜佈局的一個要素。

關於 CSS 盒模型的常見問題解答 (FAQ)

(此處省略 FAQ 部分，因為篇幅過長，且與偽原創目標不符。FAQ 部分內容可以根據需要自行添加或修改。)

以上是管理CSS框模型的詳細內容。更多資訊請關注PHP中文網其他相關文章！