前言

了解了html跟CSS的基本寫法後，方框（box）一開始聽到會疑惑為何立體的箱子會跟平面的方框有關聯？
雖然英文想像以及語意上不直觀，但一但知道它是能裝下所有元素就比較能理解了。

一切皆為盒子

基本方框（basic box）

為了避免混淆，基本方框可以視為CSS一個重要的概念。

基本方框（basic box）是瀏覽器根據CSS規則，為每個元素生成的「矩形框」。

每個元素方框通常會有以下結構：

• 內容content
• 內距padding
• 邊框border
• 邊界範圍/外距 margin

這個矩形框包含元素的內容、邊框、內距和外距，是元素在網頁上呈現和布局的最基本單位，瀏覽器會根據這個方框來計算元素的位置和尺寸。

(圖片取自這裡)

元素方框 element box

CSS核心假設所有的元素都會產生一個以上的矩形方框，稱為元素方框（element box）。------CSS大全第四版

元素方框可以視為CSS專有名詞，它會依display屬性決定是什麼種類的box。
已知所有元素都會產生元素方框，代表在排版文件內容時元素會佔據的位置，因此，每個方框都會影響其他元素方框的位置與大小。

預設情況下，元素方框以互不重疊的方式排列，但也可以透過人為方式強制讓方框重疊，以達到不同的視覺效果。

元素方框結構

每個元素方框也會有差不多結構：

• 內容區域content area
• 內距padding
• 邊框border
• 輪廓outline（僅在<CSS大全>書裡有提到，暫略過）
• 邊界範圍/外距 margin
  (但每個區域不是都必要出現，將值設定為0就能移除。)

display

在深入進行box model討論前，我還想補充三種display基本屬性，當然這三種並非全部display屬性，特意在此拉出來介紹是因為它們程度上非常影響版面配置。

每個html元素都有一個預設的display屬性值，不同的元素屬性會有不同的預設值。
大部分元素的display屬性值，預設值通常是 block 或 inline 其中一個，前者稱之為「區塊/塊狀元素」後者則是「行內元素」。

還有一種結合兩種特點稱之為「inline-block」。

• display: block 區塊/塊狀元素

1. 默認會繼承(佔滿)父元素的寬，並且會占據整行寬度;
   高度預設則是以元素撐開的高度為主。
   預設會換行。
   可以設定 width、height、margin、padding。
   常見的塊狀元素：
   <div>, <p>, <h1>~<h6>, <section>, <article>, <nav>。

• display: inline 行內元素
  行內元素本身並不會獨佔一行，而是會與其他行內元素並排在同一列。行內元素並不能設定 width、height，高和寬會依元素本身的內容被撐開。
  可以設定左右的 margin、padding，但上下 margin 可能無效。
  常見的塊狀元素：
  <span>, <a>, <strong>, <em>。

• display: inline-block
  inline-block 結合了行內元素和塊級元素的特點，
  會像行內元素一樣的同行排列，
  也擁有塊狀元素可以設定寬高的特性。
  適合用在按鈕、圖文混排、icon 等元素上。

結語

常見display屬性還有display: none、display: flex、display: grid，但目前來說，暫時先理解基礎三種，等未來說到flexbox在回頭補充其餘部分會比較清楚它們的特性。

參考資料

書<CSS大全第四版>
Mdn
CSS 中 display 的值有什麼？