如何在CSS中使用display屬性

對象的display屬性決定了瀏覽器如何渲染它。

這是一個非常重要的屬性，可能是你可以使用的值最多的一個。

這些值包括：

  • block
  • inline
  • none
  • contents
  • flow
  • flow-root
  • table（以及所有的table-*）
  • flex
  • grid
  • list-item
  • inline-block
  • inline-table
  • inline-flex
  • inline-grid
  • inline-list-item

還有其他一些你可能不會用到的，比如ruby。

選擇其中任何一個將會顯著改變瀏覽器對元素及其子元素的行為。

在這篇文章中，我將分析一些在其他地方沒有涵蓋到的最重要的值：

  • block
  • inline
  • inline-block
  • none

我在其他文章中對其他的值進行了介紹：

inline

inline是CSS中每個元素的默認顯示值。

除了一些元素（如div、p和section）是由用戶代理（瀏覽器）設置為block外，所有的HTML標籤都是默認以行內形式顯示的。

行內元素不會應用任何邊距或填充。

高度和寬度也是如此。

你可以添加它們，但網頁上的外觀不會改變 - 它們是由瀏覽器自動計算和應用的。

inline-block

與inline類似，但是inline-block會根據你指定的寬度和高度進行應用。

block

如前所述，通常元素是以行內形式顯示的，但有一些例外，包括：

  • div
  • p
  • section
  • ul

這些元素由瀏覽器設置為block。

使用display: block，元素以垂直方式一個接一個地堆疊，每個元素佔據整個頁面的100%。

如果你設置了width和height屬性的值以及margin和padding，則這些值都將被尊重。

none

使用display: none使元素消失。它仍然存在於HTML中，但在瀏覽器中不可見。