前言

在【Day 05】時候有稍微提到display屬性，但接下來介紹flexobox前我想還是重新理解一遍display對佈局的影響。

display是什麼？

display 屬性用於變更 HTML 元素的預設顯示行為。
每個html元素都有一個預設的display屬性值，不同的元素屬性會有不同的預設值。
大部分元素的display屬性值，預設值通常是 block 或 inline。

display常見屬性值

display屬性會牽涉設定外部及內部顯示類型（display types），外部類型設定會讓元素參與進流程佈局（flow layout）;而內部類型則是設定子元素的佈局。
以下談到display-outside跟display-inside為CSS概念性分類，
可藉由複合性寫法去更詳細設定display屬性：
display: (outside)(空格)(inside)

display: inline flex;      /* inline + flex layout */
display: block grid;       /* block + grid layout */
display: inline flow-root;
/* inline-level block formatting with a new block formatting context */

<display-outside>

為一關鍵字為一關鍵字歸類影響外部box model行為的display屬性值，指定為外部顯示類型(inner display types)。
當瀏覽器遇到僅具有外部顯示值的 display 屬性（例如：display: block），內部顯示值則預設為 flow。
意思是：
display: block
等同於
display: block flow

display: block

默認會繼承(佔滿)父元素的寬，並且會占據整行寬度;
高度預設則是以元素撐開的高度為主。
預設會換行。
可以設定 width、height、margin、padding。

• 常見的塊狀元素：
  <div>, <p>, <h1>~<h6>, <section>, <article>, <nav>。

display: inline

行內元素本身並不會獨佔一行，而是會與其他行內元素並排在同一列。行內元素並不能設定 width、height，高和寬會依元素本身的內容被撐開。
可以設定左右的 margin、padding，但上下 margin 可能無效。

• 常見的塊狀元素：
  <span>, <a>, <img>, <em>。

display: inline-block

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

<display-inside>

為一關鍵字歸類影響內部佈局模式的display屬性值，指定為內部顯示類型（inside display types）。
其定義了其內容所在的格式化上下文(formatting context)類型（假設它是未替換的元素）:

display: flow-root

有一個與它相似叫做flow屬性值，但我不能完全理解它的作用，先暫時略過。目前僅知道flow-root屬性值與閉合浮動有關，它會建立新的BFC（block formatting context），整合內容至父元素內。

詳細可以參考這篇：display:flow-root

display: table

類似於 HTML 的表格<table>元素，定義了一個區塊層級的方塊（ block-level box）。

display: flex

與 flexbox 相關的設定值，啟動flexbox佈局的關鍵。
適合用於一維排版（單一方向：橫排或直排）、對齊與分佈元素（例如：置中對齊、間距平均）、動態調整子元素的大小（例如：根據內容或剩餘空間伸縮）。

display: grid

與 grid 相關的設定值，啟動 grid 佈局的關鍵。
適合用於二維排版（同時控制行與列）、建立複雜的版面（像是網頁區塊佈局），可以更明確地控制每個區塊的位置。

其他

display: none

設定此屬性值的元素在文件流程中完全隱藏，且不會佔用任何空間。
應用於以隱藏或顯示元素，而無需刪除和重新建立它們，通常與 JavaScript 一起使用。

參考資料

Mdn - display

關於 "display" 屬性

w3school - CSS The display Property