css display 有哪些？深入解析 CSS Display 屬性：網頁排版的核心與實務應用

在網頁設計與前端開發中，CSS 的 display 屬性無疑是佈局（Layout）的基石。它決定了一個元素如何被呈現、如何與其兄弟元素和父元素互動，以及它是否佔據空間。掌握 display 屬性，是您精通網頁排版、實現響應式設計的關鍵。

本文將深入探討 CSS 中常見的 display 屬性值，從傳統的 block、inline 到現代的 flex 和 grid，幫助您全面理解它們的行為與應用場景，讓您能更靈活地操控網頁元素，建構出更複雜且優美的介面。

主要 CSS display 屬性值總覽

CSS display 屬性具有多種值，每個值都會改變元素的視覺呈現與佈局行為。以下我們將詳細介紹其中最核心與常用的幾種：

1. display: block;

block 元素是網頁中最常見的預設顯示類型之一。它的行為模式如下：

• 獨佔一行： block 元素會自動佔據其父容器的全部可用寬度，並在其前後產生換行。即使內容很短，它也會迫使後續元素從新的一行開始。
• 可設定尺寸： 您可以自由地為 block 元素設定 width（寬度）、height（高度）、margin（外邊距）和 padding（內邊距）。
• 垂直堆疊： block 元素會垂直堆疊，一個接一個地排列。

常見應用： 大多數結構性 HTML 元素，如 <div>、<h1> 到 <h6>、<p>、<ul>、<ol>、<form>、<header>、<footer>、<section>、<article> 等，預設就是 block 級別元素。

block 元素就像網頁中的「磚塊」，它們各自佔據一整塊空間，並垂直堆疊起來。

2. display: inline;

inline 元素與 block 元素行為相反，它們旨在與其他內容在同一行內流動。

• 內容決定寬度： inline 元素只佔據其內容所需的寬度。
• 不產生換行： 它們不會在其前後產生換行，因此多個 inline 元素會並排顯示，直到空間不足才自動換行。
• 不可設定尺寸： 您不能直接為 inline 元素設定 width 或 height。其尺寸由內容決定。
• 水平邊距有效，垂直邊距無效： margin-left 和 margin-right 會生效，但 margin-top 和 margin-bottom 不會影響其在佈局中的位置（它們會被應用，但不會推開周圍的元素）。padding 的四個方向都有效，但垂直方向的 padding 也不會影響行高。

常見應用： 文本級別的 HTML 元素，如 <span>、<a>（超連結）、<strong>、<em>、<img>（圖片）、<label> 等，預設就是 inline 級別元素。

inline 元素就像文本中的「單詞」，它們在同一行中流動，其大小由內容決定。

3. display: inline-block;

inline-block 元素結合了 block 和 inline 兩種元素的特性，提供了一種非常實用的混合模式。

• 並排顯示： 它們像 inline 元素一樣，會水平並排顯示，不會自動換行。
• 可設定尺寸： 但同時，它們又像 block 元素一樣，可以自由地設定 width、height、margin 和 padding。
• 對齊靈活： inline-block 元素可以使用 vertical-align 屬性進行垂直對齊。

常見應用： 導航菜單項目（當您希望它們並排顯示且可設定寬高時）、圖片列表、卡片式佈局（在 Flexbox 和 Grid 普及之前），以及任何需要元素並排顯示但又想控制其尺寸的場景。

inline-block 元素是「能並排的磚塊」，既能像文本一樣流動，又能像區塊一樣控制尺寸。

4. display: none;

display: none; 是一個非常特殊的屬性值，它的作用是完全移除元素。

• 完全隱藏： 設定為 none 的元素將不會在網頁上顯示。
• 不佔空間： 它不僅不可見，而且會從文檔流中完全移除，不佔據任何空間，就好像該元素從未存在過一樣。
• 無法互動： 元素及其所有子元素將無法被點擊、選擇或與之互動。

與 visibility: hidden; 的區別：

visibility: hidden; 只是讓元素不可見，但它仍然佔據原有的空間，就像一個「透明的」元素。而 display: none; 則完全將元素從文檔流中移除，不佔用任何空間。

常見應用： 用於 JavaScript 控制的動態內容顯示與隱藏（如彈出視窗、標籤頁內容切換），或在不同響應式斷點下隱藏某些元素。

display: none; 是網頁中的「隱形傳送門」，讓元素徹底消失，不留痕跡。

現代佈局利器：display: flex; (Flexbox) 與 display: grid; (CSS Grid)

隨著網頁設計需求的日益複雜，傳統的 block 和 inline-block 在應對複雜佈局時顯得力不從心。CSS Flexbox 和 CSS Grid 應運而生，為現代網頁佈局帶來了革命性的變化。

5. display: flex; (Flexbox / 彈性盒子)

彈性盒子：一維佈局的瑞士刀

Flexbox 是一種為一維佈局（一行或一列）設計的 CSS 模塊。它使得容器內項目（flex items）的對齊、分佈和空間分配變得非常簡單和靈活。

• 靈活的方向： 您可以輕鬆地將項目沿著主軸（水平或垂直）排列，並控制它們的順序。
• 精確的對齊： 提供多種屬性（如 justify-content, align-items, align-self）來控制項目在主軸和交叉軸上的對齊方式。
• 空間分佈： 項目可以根據其內容或指定的比例自動分配剩餘空間（通過 flex-grow, flex-shrink, flex-basis）。

當一個元素被設定為 display: flex; 後，它就成為了一個 Flex 容器（Flex Container），其直接子元素則成為 Flex 項目（Flex Items）。Flexbox 的所有魔法都發生在這些項目之間。

常見應用： 導航欄、卡片列表、分頁器、表單元素對齊、垂直居中任何內容、響應式圖片畫廊、均勻分佈的按鈕組等所有需要一維排列和對齊的場景。

Flexbox 就像一條彈性繩，可以把物品（元素）沿著一個方向（水平或垂直）捆綁、對齊和分配空間。

6. display: grid; (CSS Grid / 網格佈局)

網格佈局：二維佈局的設計師工具

CSS Grid 是一個強大的二維佈局系統。它允許您將網頁劃分為行（rows）和列（columns），並將元素精確地放置在這些網格單元格或區域中。

• 行與列： 您可以定義明確的行和列軌道（tracks），並指定它們的大小。
• 網格區域： 可以將多個網格單元格合併成一個命名的網格區域，便於管理和佈局。
• 項目放置： 元素可以放置在任意網格單元格或橫跨多個單元格。
• 響應式設計： 結合媒體查詢，可以輕鬆實現複雜的響應式佈局。

當一個元素被設定為 display: grid; 後，它就成為了一個 Grid 容器（Grid Container），其直接子元素則成為 Grid 項目（Grid Items）。Grid 的強大之處在於其對行和列的同時控制。

常見應用： 整個網頁的頁面佈局、複雜的儀表板、圖片畫廊、任何需要將元素精確地放置在預定義網格上的場景。

CSS Grid 就像一張方格紙，您可以在上面精確地繪製網格線，並將元素放置在任意方格（或多個方格）中。

其他常見但較特殊的 display 值

除了上述核心值，CSS display 屬性還有一些較不常用但特定場景下非常有用的值：

7. display: list-item;

list-item 元素行為類似於 block 元素，但額外會生成一個列表項目標記（通常是圓點或數字）。HTML 中的 <li> 元素預設就是 display: list-item;。

• 行為與 block 類似，佔據整行並可設定尺寸。
• 會在其內容前產生一個標記（例如點、數字或自定義圖像），可通過 list-style 屬性控制。

應用： 主要用於列表結構，或任何您希望元素既有區塊行為又有列表標記的場景。

8. display: table;, display: table-row;, display: table-cell; 等

這些值允許您模擬 HTML 表格的行為，而無需使用實際的 <table> 標籤。它們提供了一種在 CSS 中創建表格佈局的方式。

• display: table;：行為類似於 <table> 元素。
• display: table-row;：行為類似於 <tr> 元素。
• display: table-cell;：行為類似於 <td> 或 <th> 元素。
• 還有 table-caption, table-column, table-column-group, table-footer-group, table-header-group, table-row-group 等。

應用： 在 Flexbox 和 Grid 之前，它們常用於實現一些基於列的佈局或垂直居中。但在現代網頁開發中，Flexbox 和 Grid 通常是更優雅和靈活的解決方案，因此這些 table-* 顯示屬性更多用於讓非表格元素呈現表格般的行為，或在舊版瀏覽器兼容時使用。

9. display: contents;

contents 是一個相對較新的 display 值，它的作用非常特別：它使得元素本身在佈局上消失，但其子元素會直接成為其父元素的子元素來參與佈局。換句話說，它移除了元素本身的「盒子」，但保留了內容。

• 設定為 contents 的元素本身不會生成任何盒子，因此不會佔據空間，也無法應用背景、邊框、內外邊距等。
• 它的子元素會直接繼承其父元素（即 contents 元素的祖先元素）的佈局上下文。

應用： 主要用於解決語義化 HTML 結構與視覺佈局需求之間的衝突，例如在 Flexbox 或 Grid 容器中，如果您希望某個父元素不參與佈局，但其子元素直接成為 Flex 或 Grid 項目時。這對於無障礙輔助功能和複雜的佈局結構尤其有用。

10. display: flow-root;

flow-root 的主要作用是為元素創建一個新的塊格式化上下文（Block Formatting Context, BFC）。

• 一個新的 BFC 會包圍其浮動（float）子元素，防止外邊距塌陷，以及處理一些複雜的佈局問題，類似於過去使用 overflow: hidden; 或清除浮動。

應用： 當您需要隔離浮動元素，防止它們影響外部佈局，或者解決邊距塌陷問題時，flow-root 是一個比傳統清除浮動或 overflow: hidden; 更語義化、副作用更小的選擇。

什麼時候該使用哪種 display 值？

理解各種 display 屬性值的行為是基礎，更重要的是知道在什麼情況下選擇最合適的值：

• display: block;：
  • 用於主要結構區塊，例如網站的各個部分（頁首、頁尾、側邊欄、主要內容區）。
  • 需要元素獨佔一行且可自由控制寬高、邊距。
  • 通常用於包裹大段內容的容器。
• display: inline;：
  • 用於文本流中的小段內容，如鏈接、強調文本、圖標等。
  • 不希望元素產生換行，且其尺寸由內容決定。
• display: inline-block;：
  • 當您希望多個元素並排顯示，同時又想對它們設定寬高、邊距時（例如導航菜單項、產品小卡片）。
  • 在 Flexbox/Grid 之前，是實現水平佈局的常見方式。
• display: none;：
  • 需要完全隱藏元素，使其不佔用任何空間，且不可被互動時。
  • 通常與 JavaScript 配合，用於動態顯示/隱藏內容。
• display: flex;：
  • 當您需要在一條軸線（水平或垂直）上對齊、分佈、排序項目時。
  • 例如：導航欄的水平項目排列、表單元素的彈性對齊、內容卡片的均勻分佈。
  • 實現各種內容的居中對齊。
• display: grid;：
  • 當您需要進行複雜的二維佈局，同時控制行和列的排列時。
  • 例如：整個網頁的響應式佈局、儀表板的區塊分佈、圖片畫廊的複雜網格排列。
  • 其語法更適合處理整個頁面的宏觀佈局。
• display: contents;：
  • 當您有結構性父元素（為了語義化或 JavaScript 操作），但該父元素不應影響其子元素在 Flex 或 Grid 佈局中的直接參與時。
  • 用於「扁平化」DOM 樹，讓子元素直接參與到祖先元素的佈局中。

總結

CSS 的 display 屬性是網頁佈局的核心所在。從基本的 block、inline 和 inline-block，到強大的現代佈局模塊 flex 和 grid，每個值都提供了獨特的佈局能力。深入理解這些屬性及其應用場景，將使您能夠：

• 更精確地控制元素在頁面上的呈現。
• 建構出更具彈性和響應性的網頁介面。
• 優化網頁性能，減少不必要的 DOM 操作。

建議您在實際專案中多加練習，動手嘗試不同 display 值的組合與效果。唯有不斷實踐，才能真正將這些知識內化為您的排版利器，創造出視覺與功能兼具的完美網頁。

常見問題（FAQ）

• 如何讓兩個區塊（div）並排顯示？

  最常見且現代的方法是將它們的父容器設定為 display: flex;，或將這兩個區塊本身設定為 display: inline-block;。Flexbox 通常提供更靈活的對齊和分佈控制。

• 為何我的 inline 元素設定了 width 和 height 卻沒有作用？

  inline 元素（例如 <span>, <a>）的設計本意是融入文本流中，它們會忽略 width 和 height 屬性。如果您需要元素並排顯示且能設定尺寸，請使用 display: inline-block; 或將其父容器設定為 display: flex;。

• `display: none;` 與 `visibility: hidden;` 有何不同？

  display: none; 會將元素從文檔流中完全移除，不佔用任何空間，也無法被使用者或輔助工具發現。而 visibility: hidden; 則只是讓元素不可見，但它仍然會佔據其在佈局中的原始空間，就像一個透明的元素。

• 何時該選擇 Flexbox 而非 Grid？

  選擇取決於您的佈局維度：Flexbox 專為一維佈局（一行或一列）而設計，適合對齊和分佈單排項目，如導航菜單或卡片列表。Grid 則是用於二維佈局（同時控制行和列），非常適合複雜的頁面佈局或需要精確控制元素在網格中位置的場景。

• 如何解決 inline-block 元素之間的空隙問題？

  inline-block 元素之間通常會因為 HTML 原始碼中的空白字符（如空格、換行）而產生預設的間隔。解決方法包括將父元素的 font-size 設定為 0，然後在子元素上重新設定字體大小；或者直接移除 HTML 標籤之間的空白字符（不推薦，會影響可讀性）；亦或是使用負外邊距 margin-left: -Xpx; 來抵消間距。