display 屬性是一個極為重要且強大的屬性，它控制著元素在網頁中的呈現方式。這次要搭配的是CSS Display Module Level 3以下為部分摘要重點。

Box tree

CSS的主要目標是將源文檔（通常是HTML或XML文檔）中的元素和文本節點呈現到屏幕、紙張或音頻流等輸出媒介上。為實現這一目標，CSS 需要生成一個中介結構稱為 "box tree"，該結構代表呈現文檔的格式結構。

每個 box 表示相應的元素（或虛擬元素）在畫布上的空間和/或時間，而每個 box 中的文本序列則表示其文本節點的相應內容。為了創建 box tree，CSS首先使用層疊和繼承來為源樹中的每個元素和文本節點分配每個CSS屬性的計算值。

接下來，對於每個元素，CSS根據該元素的 display 屬性生成零個或多個 box。通常情況下，一個元素生成一個 box，即主要 box，它代表自身並包含其在 box tree 中的內容。

然而，某些 display 值（例如 display: list-item）會生成多個 box（例如主要塊 box 和子標記 box）。某些值（例如 none 或 contents）導致元素和/或其後代根本不生成任何 box。box 經常以其 display 類型來指稱，例如由具有 display: block 的元素生成的 box 稱為 "block box" 或 "block"。

Box 佈局模式：display 屬性

display 屬性控制著元素在網頁中的外觀和佈局，並根據其值生成不同類型的 box。以下是一些 display 屬性的常見值以及它們生成的不同類型的 box：

block、inline 和 run-in 關鍵字

• display: block：生成一個塊級 box，通常用於呈現块元素，它佔據整個可用寬度。
• display: inline：生成一個行內 box，通常用於呈現內聯元素，其寬度由內容決定。
• display: run-in：當元素是可運行的時候，生成一個 box。

flow、flow-root、table、flex、grid 和 ruby 關鍵字

• display: flow：生成一個內部 Flow box。
• display: flow-root：生成一個具有新的 BFC（Block Formatting Context）的 box。
• display: table：生成一個表格，包括表格的行、列和單元格。
• display: flex：生成一個 Flexbox 容器，用於實現彈性佈局。
• display: grid：生成一個 Grid 容器，用於實現網格佈局。
• display: ruby：生成一個 Ruby 容器，用於實現漢字注音。

生成標記盒子：list-item 關鍵字

• display: list-item：生成一個列表項，通常用於呈現列表元素，並生成主要塊盒子和子標記盒子。

table-* 和 ruby-* 關鍵字

• 一組以 table- 和 ruby- 開頭的關鍵字，用於更詳細地定義表格和 Ruby 佈局。

none 和 contents 關鍵字

• display: none：元素不生成任何 box，完全隱藏。
• display: contents：將元素的子元素提升到元素的父元素層級，並自身不生成 box。

預先設定的行內顯示值

• 一些 display 值具有預先定義的行內顯示行為。

自動盒子類型轉換

• 在某些情況下，元素的 display 屬性值可能會自動轉換為其他值，進行佈局。

根元素的主要盒子

• display: block 屬性是根元素的主要盒子的默認值，它通常包含整個文檔的內容。

顯示順序：order 屬性

除了 display 屬性外，還有一個 order 屬性，它用於控制元素在彈性佈局中的顯示順序。通過調整 order 的值，您可以改變元素在其容器中的排列順序，這對於創建靈活的佈局非常有用。

不可見性：visibility 屬性

visibility 屬性用於控制元素的可見性。它可以將元素設置為可見、隱藏或占位符，這對於創建互動性和動畫效果非常重要。

運行內佈局

display 屬性的基本概念，包括不同的顯示值和它們生成的不同類型的 box。

小結

display 屬性是CSS中一個關鍵的屬性，它控制著元素的呈現方式和佈局。真是有夠多東西拉！值得我們繼續探看下去！鮮醬子啦，下次再見～

更多延伸參考

• CSS Display Module Level 3
• CSS Cascading and Inheritance Level 3
• CSS Values and Units Level 3
• CSS2 Specification