“盒模型”初探

隱逸王發表於2021-06-02
模型

閱讀時間：6min

目標：學習盒模型的基本理論，瞭解盒裝模型的工作原理，瞭解盒模型與替代模型的區別以及如何進行切換。

前置條件：HTML和CSS基礎知識。

在 CSS 中，所有的元素都被一個個的“盒子（box）”包圍著，理解這些“盒子”的基本原理，是我們使用CSS實現準確佈局、處理元素排列的關鍵。

什麼是CSS 盒模型?

完整的 CSS 盒模型應用於塊級盒子，內聯盒子只使用盒模型中定義的部分內容。模型定義了盒的每個部分 —— margin, border, padding, and content —— 合在一起就可以建立我們在頁面上看到的內容。

盒模型的各個部分

CSS中組成一個塊級盒子需要:

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

如下圖：

Diagram of the box model

標準盒模型

在標準模型中，如果你給盒設定 width 和 height，實際設定的是 content box。 padding 和 border 再加上設定的寬高一起決定整個盒子的大小。 見下圖。

img

假設定義了 width, height, margin, border, and padding:

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

如果使用標準模型寬度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。

注: margin 不計入實際大小 —— 當然，它會影響盒子在頁面所佔空間，但是影響的是盒子外部空間。盒子的範圍到邊框為止 —— 不會延伸到margin。

塊級盒子 和 內聯盒子

在 CSS 中我們廣泛地使用兩種“盒子” —— 塊級盒子 (block box) 和 內聯盒子 (inline box)。這兩種盒子會在頁面流（page flow）和元素之間的關係方面表現出不同的行為:

塊級盒子的特性

  • 盒子會在內聯的方向上擴充套件並佔據父容器在該方向上的所有可用空間，在絕大數情況下意味著盒子會和父容器一樣寬。
  • 每個盒子都會換行。
  • width 和 height 屬性可以發揮作用。
  • 內邊距（padding）, 外邊距（margin） 和 邊框（border） 會將其他元素從當前盒子周圍“推開”。

除非特殊指定，諸如標題(<h1>等)和段落(<p>)預設情況下都是塊級的盒子。

內聯盒子的特性

  • 盒子不會產生換行。
  • width 和 height屬性將不起作用。
  • 垂直方向的內邊距、外邊距以及邊框會被應用但是不會把其他處於 inline 狀態的盒子推開。
  • 水平方向的內邊距、外邊距以及邊框會被應用且會把其他處於 inline 狀態的盒子推開。

用做連結的 <a> 元素、 <span>、 <em> 以及 <strong> 都是預設處於 inline 狀態的。

我們通過對盒子display屬性的設定，比如 inline 或者 block ，來控制盒子的外部顯示型別。

補充: 內部和外部顯示型別

在這裡最好也解釋下內部 和 外部 顯示型別。如上所述， css的box模型有一個外部顯示型別，來決定盒子是塊級還是內聯。

同樣盒模型還有內部顯示型別，它決定了盒子內部元素是如何佈局的。預設情況下是按照 正常文件流 佈局，也意味著它們和其他塊元素以及內聯元素一樣(如上所述).

但是，我們可以通過使用類似 flex 的 display 屬性值來更改內部顯示型別。 如果設定 display: flex，在一個元素上，外部顯示型別是 block，但是內部顯示型別修改為 flex。 該盒子的所有直接子元素都會成為flex元素，會根據 彈性盒子（Flexbox]規則進行佈局。

使用瀏覽器開發工具查案盒模型

您的 瀏覽器開發者工具可以使您更容易地理解box模型。如果您在Firefox的DevTools中檢視一個元素，您可以看到元素的大小以及它的外邊距、內邊距和邊框。這是一個很好的檢查元素大小的方式，可以便捷的判斷您的盒子大小是否符合預期 !

image-20210602185753877

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好！我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！

相關文章