CSS 布局 - display 屬性

display 屬性是用于控制布局的最重要的 CSS 屬性。

display 屬性

display 屬性規定是否/如何顯示元素。

每個 HTML 元素都有一個默認的 display 值，具體取決于它的元素類型。大多數元素的默認 display 值為 block 或 inline。

點擊顯示面板

此面板包含一個 <div> 元素，它默認是隱藏的。（display: none）

它由 CSS 設置樣式，我們使用 JavaScript 顯示它。（更改為 display: block）

塊級元素（block element）

塊級元素總是從新行開始，并占據可用的全部寬度（盡可能向左和向右伸展）。

這個 <div> 元素屬于塊級元素。

塊級元素的一些例子：

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

行內元素（inline element）

內聯元素不從新行開始，僅占用所需的寬度。

這是段落中的行內 <span> 元素。

行內元素的一些例子：

  • <span>
  • <a>
  • <img>

Display: none;

display: none; 通常與 JavaScript 一起使用，以隱藏和顯示元素，而無需刪除和重新創建它們。如果您想知道如何實現此目標，請查看本頁面上的最后一個實例。

默認情況下，<script> 元素使用 display: none;。

覆蓋默認的 Display 值

如前所述，每個元素都有一個默認 display 值。但是，您可以覆蓋它。

將行內元素更改為塊元素，反之亦然，對于使頁面以特定方式顯示同時仍遵循 Web 標準很有用。

一個常見的例子是為實現水平菜單而生成行內的 <li> 元素：

實例

li {
  display: inline;
}

親自試一試

注意：設置元素的 display 屬性僅會更改元素的顯示方式，而不會更改元素的種類。因此，帶有 display: block; 的行內元素不允許在其中包含其他塊元素。

下例將 <span> 元素顯示為塊元素：

實例

span {
  display: block;
}

親自試一試

下例將 <a> 元素顯示為塊元素：

實例

a {
  display: block;
}

親自試一試

隱藏元素 - display:none 還是 visibility:hidden？

display:none

visibility:hidden

Reset

通過將 display 屬性設置為 none 可以隱藏元素。該元素將被隱藏，并且頁面將顯示為好像該元素不在其中：

實例

h1.hidden {
  display: none;
}

親自試一試

visibility:hidden; 也可以隱藏元素。

但是，該元素仍將占用與之前相同的空間。元素將被隱藏，但仍會影響布局：

實例

h1.hidden {
  visibility: hidden;
}

親自試一試

更多實例

display: none; 與 visibility: hidden; 之間的差異
本例演示 display: none; VS visibility: hidden;
結合使用 CSS 和 JavaScript 來顯示內容
本例演示如何使用 CSS 和 JavaScript 在單擊時顯示元素。

CSS Display/Visibility 屬性

屬性 描述
display 指定應如何顯示元素。
visibility 指定元素是否應該可見。