CSS display 屬性入門指南：新手必讀

更新日期： 2024 年 10 月 22 日

在 CSS 中，display 屬性是用來控制元素，如何在頁面中進行佈局顯示的關鍵屬性。

不同的 display 值決定了元素是否作為塊級元素、行內元素，還是其他方式進行渲染。

理解 display 屬性是掌握網頁佈局的第一步。

本篇文章將詳細介紹 display 屬性的基本概念、常見的 display 值，以及 HTML 標籤的預設 display 屬性。

什麼是 display 屬性？

display 屬性控制元素在頁面上的顯示方式，它決定了元素是以 塊級元素（Block-Level Element）、行內元素（Inline Element） 還是其他佈局模式呈現。

不同的 display 值可以改變元素的佈局行為、參與排版的方式，進而影響它與其他元素的關係。

display 的常見值包括：

• block
• inline
• inline-block
• none
• flex
• grid
• 更多其他的值如 table、list-item 等。

常見的 display 值

block（塊級元素）

當一個元素的 display 設置為 block 時，它會作為塊級元素呈現，這意味著該元素會獨占一行，並且自動擴展到與其父容器同寬。塊級元素可以包含寬度、高度、內距和外距等屬性。

範例：

div {
  display: block;
}

在這裡，div 元素作為塊級元素，會自動佔滿父容器的寬度，並且上下方會與其他元素隔開。

常見預設為 block 的 HTML 標籤：

• <div>
• <p>
• <h1> – <h6>
• <section>
• <article>
• <header>
• <footer>

inline（行內元素）

inline 顯示的元素稱為行內元素，這種元素不會佔據整行，它只佔據其內容所需的寬度，並且可以與其他行內元素排在同一行。

行內元素不能設置寬度和高度，也無法影響垂直方向的 margin 和 padding。

範例：

span {
  display: inline;
}

在這裡，span 元素作為行內元素，會在行內顯示，與其他行內元素並排，不會自動換行。

常見預設為 inline 的 HTML 標籤：

• <span>
• <a>
• <em>（斜體）
• <strong>（加粗）
• <img>（圖片也屬於行內元素）

inline-block

inline-block 是介於 inline 和 block 之間的一種模式。

使用 inline-block 的元素像行內元素一樣與其他元素並排，但它的外觀和行為則像塊級元素，可以設置寬度、高度、內距和外距。

範例：

button {
  display: inline-block;
  width: 100px;
  height: 50px;
}

在這裡，button 元素會像行內元素一樣與其他元素並排，但可以設置寬高。

none

當 display 設置為 none 時，元素將被完全從文檔流中移除，既不佔用空間，也不會顯示在頁面上。

這與設置 visibility: hidden 不同，none 會讓元素完全消失，而 visibility: hidden 則僅隱藏元素，但保留其佔用的空間。

範例：

div {
  display: none;
}

這段程式碼會使 div 元素在頁面上完全不可見，也不佔用任何空間。

flex（彈性佈局）

flex 是一種強大的佈局模式，允許我們創建靈活的響應式布局。

當一個容器的 display 設置為 flex，它的子元素會根據 flex 規則進行排列和調整。

flex 支持橫向或縱向排列、換行、自動伸縮等功能。

範例：

.container {
  display: flex;
}

這會將 .container 設置為一個彈性容器，裡面的子元素會根據 flex 規則自動排列。

常見的 flex 屬性包括：

• justify-content：控制主軸上的對齊方式。
• align-items：控制交叉軸上的對齊方式。
• flex-wrap：控制子元素是否換行。

grid（網格佈局）

grid 是另一個強大的佈局模式，用來創建基於網格的兩維佈局。

當一個容器設置為 grid 佈局，它的子元素會根據行和列來排列，可以精確控制元素的大小、間距和位置。

範例：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

這段程式碼將 .container 設置為一個三列的網格佈局，每一列的寬度都會相等。

常見的 grid 屬性包括：

• grid-template-columns：設置列數和列寬。
• grid-template-rows：設置行數和行高。
• grid-gap：控制行與列之間的間距。

新手常犯的錯誤

誤用 inline 和 block 元素

新手常常混淆 inline 和 block 元素之間的區別，例如嘗試為行內元素（如 <span>）設置寬度或高度，卻發現無效。

這是因為行內元素不能直接設置寬度和高度。

解決方案

可以將 inline 元素設置為 inline-block，這樣就可以為它設置寬度和高度，同時保持行內排列行為。

忘記 display: none 會完全移除元素

使用 display: none 會讓元素從文檔流中完全消失，並且不佔據空間。

新手有時會誤以為這只是隱藏元素，卻不知道它會影響佈局和排版。

解決方案

如果只是想隱藏元素，但希望它依然佔據空間，可以使用 visibility: hidden。

結論

display 屬性是控制元素在頁面上如何顯示的關鍵屬性，理解它的不同值對於構建靈活的網頁佈局至關重要。

無論是使用 block、inline，還是進階的 flex 和 grid，掌握 display 屬性能讓你的設計更具結構性和可控制性。

通過這篇文章的介紹，希望你對 CSS display 屬性有了清晰的理解，並能夠靈活應用到你的網頁設計中。