CSS - display 屬性

上一頁
下一頁

CSS 的 display 屬性用於指定元素在網頁上如何顯示。它控制元素的佈局和可見性。display 屬性在設定元素的內部和外部顯示型別時非常有用。

語法

display: value;

屬性值

值 描述
inline 將元素顯示為內聯元素，寬度和高度屬性對其無效。預設值。
block 將元素顯示為塊級元素，從新行開始，佔據整行寬度。
contents 使元素從佈局中消失，同時保持其子元素可見並保持其在佈局中的原始位置。
flex 將元素顯示為塊級彈性容器。
grid 將元素顯示為塊級網格容器。
inline-block 允許元素與其他內聯元素一起流動，同時具有塊級特性，如寬度和高度。
inline-flex 將元素顯示為內聯級彈性容器。
inline-grid 將元素顯示為內聯級網格容器。
inline-table 將元素顯示為內聯級表格。
run-in 根據上下文將元素顯示為塊級或內聯級。
table 使元素像 <table> 元素一樣。
table-caption 使元素像 <caption> 元素一樣。
table-column-group 使元素像 <colgroup> 元素一樣。
table-header-group 使元素像 <thead> 元素一樣。
table-footer-group 使元素像 <tfoot> 元素一樣。
table-row-group 使元素像 <tbody> 元素一樣。
table-cell 使元素像 <td> 元素一樣。
table-column 使元素像 <col> 元素一樣。
table-row 使元素像 <tr> 元素一樣。
none 完全移除元素。
initial 將屬性設定為其預設值。
inherit 從父元素繼承屬性。

CSS Display 屬性示例

以下示例說明了使用不同值的 display 屬性。

使用 Inline 值的 Display 屬性

要使元素表現得像內聯級元素，以便元素在文字和其他內聯元素內流動，而不是強制換行，只佔用所需的寬度，我們使用 inline 值。在這種情況下，寬度和高度屬性沒有任何影響。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .inline-item {
         display: inline;
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
      }

      .container {
         border: 3px solid #ccc;
         padding: 15px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: inline 
   </h4>
   <div class="container">
      <span class="inline-item">
         Item 1
      </span>
      <span class="inline-item">
         Item 2
      </span>
      <span class="inline-item">
         Item 3
      </span>
   </div>
</body>

</html>

使用 Block 值的 Display 屬性

要使元素表現得像塊級元素，以便它從新行開始並佔據可用的完整寬度，延伸到其容器的左右邊緣，我們使用 block 值。寬度和高度屬性會影響元素。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .block-item {
         display: block;
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
      }

      .container {
         border: 3px solid #ccc;
         padding: 15px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: block 
   </h4>
   <div class="container">
      <span class="block-item">
         Item 1
      </span>
      <span class="block-item">
         Item 2
      </span>
      <span class="block-item">
         Item 3
      </span>
   </div>
</body>

</html>

使用 Contents 值的 Display 屬性

要使元素本身從佈局中消失，但其子元素保留在佈局中，就像它們是元素父元素的直接子元素一樣，我們使用 contents 值。它對於刪除不必要的包裝器元素並保持其子元素可見很有用。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .wrapper {
         display: contents;
      }

      .child {
         text-align: center;
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
      }

      .parent {
         display: block;
         background-color: #f0f0f0;
         padding: 10px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: contents
   </h4>
   <div class="parent">
      <div class="wrapper">
         <div class="child">
            Child 1
         </div>
         <div class="child">
            Child 2
         </div>
         <div class="child">
            Child 3
         </div>
      </div>
   </div>
</body>

</html>

使用 Flex 值的 Display 屬性

要將元素設定為彈性容器，使其子元素（彈性專案）以靈活且響應的方式佈局，我們使用 flex 值。容器使用 Flexbox 佈局模型，該模型允許沿單個軸輕鬆對齊、分佈和排序專案。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         background-color: #f0f0f0;
         padding: 10px;
      }

      .flex-item {
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
         flex: 1;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: flex
   </h4>
   <div class="flex-container">
      <div class="flex-item">
         Item 1
      </div>
      <div class="flex-item">
         Item 2
      </div>
      <div class="flex-item">
         Item 3
      </div>
   </div>
</body>

</html>

使用 Grid 值的 Display 屬性

要將元素設定為網格容器，該容器使用網格佈局模型，允許建立具有行和列的二維佈局，我們使用 grid 值。網格專案可以顯式或自動放置和調整大小跨網格。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         background-color: #f0f0f0;
         padding: 10px;
         gap: 10px;
      }

      .grid-item {
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: grid
   </h4>
   <div class="grid-container">
      <div class="grid-item">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item">
         Item 3
      </div>
   </div>
</body>

</html>

使用 Inline Block 值的 Display 屬性

要使元素表現得像內聯級元素（允許它與文字和其他內聯內容一起流動），同時保留塊級屬性（如寬度和高度），我們使用 inline-block 值。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .inline-block-item {
         text-align: center;
         display: inline-block;
         width: 200px;
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
      }

      .container {
         border: 3px solid #ccc;
         padding: 15px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: inline-block 
   </h4>
   <div class="container">
      <span class="inline-block-item">
         Item 1
      </span>
      <span class="inline-block-item">
         Item 2
      </span>
      <span class="inline-block-item">
         Item 3
      </span>
   </div>
</body>

</html>

使用 Inline Flex 屬性的 Display 屬性

要將元素設定為內聯級彈性容器，使容器表現得像內聯元素一樣，與周圍的文字或內聯元素一起流動，同時仍然對子元素應用 Flexbox 佈局規則，我們使用 inline-flex 屬性。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .inline-flex-container {
         display: inline-flex;
         background-color: #f0f0f0;
         padding: 10px;
      }

      .flex-item {
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
         flex: 1;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: inline-flex
   </h4>
   <div class="inline-flex-container">
      <div class="flex-item">
         Item 1
      </div>
      <div class="flex-item">
         Item 2
      </div>
      <div class="flex-item">
         Item 3
      </div>
   </div>
</body>

</html>

使用 Inline Grid 值的 Display 屬性

要將元素設定為內聯級網格容器，使其表現得像內聯元素一樣（與文字和其他內聯內容一起流動），同時使用網格佈局模型來排列其子元素，我們使用 inline-grid 值。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: inline-grid;
         background-color: #f0f0f0;
         padding: 10px;
         gap: 10px;
      }

      .inline-grid-item {
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: inline-grid
   </h4>
   <div class="grid-container">
      <div class="inline-grid-item">
         Item 1
      </div>
      <div class="inline-grid-item">
         Item 2
      </div>
      <div class="inline-grid-item">
         Item 3
      </div>
   </div>
</body>

</html>

使用 Run In 值的 Display 屬性

要使元素根據上下文表現得像塊級元素或內聯級元素，我們使用 run-in 值。它旨在允許元素“執行到”周圍的文字或其他元素中。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .block-container {
         display: block;
         background-color: #f0f0f0;
         padding: 10px;
      }

      .run-in {
         display: run-in;
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: run-in
   </h4>
   <div class="block-container">
      <div class="run-in">
         Run-In Element
      </div>
      <p>
         This paragraph follows the run-in element. Depending on 
         the browser support, the run-in element might appear 
         as a block or inline element here.
      </p>
   </div>
</body>

</html>

使用 List Item 值的 Display 屬性

要使元素表現得像列表項一樣，以便它顯示列表標記（專案符號或數字）並使用縮排進行格式化，類似於專案在無序 <ul> 或有序列表 <ol> 中的顯示方式，我們使用 list-item 值。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .list-item {
         display: list-item;
         background-color: #4CAF50;
         padding: 10px;
         margin: 10px;
         text-align: center;

      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h3>
      display: list item
   </h3>
   <div class="list-item">
      Item 1
   </div>
   <div class="list-item">
      Item 2
   </div>
   <div class="list-item">
      Item 3
   </div>

</body>

</html>

使用 Table 值的 Display 屬性

要使用 CSS 建立類似表格的佈局，而不使用 HTML 表格元素，我們可以對錶格使用不同的顯示方式。在以下示例中，一些值 table、table-row、table-cell 和 table-caption 已被使用。

  • table: 建立一個像 <table> 一樣的容器，
  • table-cell: 像 <td> 單元格一樣設定元素的樣式，
  • table-row: 將元素定義為像 <tr> 一樣的行，
  • table-caption: 像 <caption> 元素一樣工作，為表格定位標題。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         background-color: #4CAF50;
         color: white;
         display: flex;
         border: 1px solid black;
      }

      .table {
         display: table;
      }

      .row {
         display: table-row;
         padding: 3px;
      }

      .cell {
         display: table-cell;
         padding: 3px;
      }

      .caption {
         display: table-caption;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: table, table-row, table-cell, table-caption
   </h4>
   <div class="table">
      <div class="caption">
         Sample Table
      </div>
      <div class="row">
         <div class="cell">
            Row1-Cell1
         </div>
         <div class="cell">
            Row1-Cell2
         </div>
         <div class="cell">
            Row1-Cell3
         </div>
      </div>
      <div class="row">
         <div class="cell">
            Row2-Cell1
         </div>
         <div class="cell">
            Row2-Cell2
         </div>
         <div class="cell">
            Row2-Cell3
         </div>
      </div>
      <div class="row">
         <div class="cell">
            Row3-Cell1
         </div>
         <div class="cell">
            Row3-Cell2
         </div>
         <div class="cell">
            Row3-Cell3
         </div>
      </div>
   </div>
</body>

</html>

使用 None 值的 Display 屬性

要完全隱藏元素，使其從佈局和頁面中消失，將其從文件流中移除，使其不佔用任何空間，並且不可見或不可互動，我們使用 none 值。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .hidden {
         display: none;
      }

      .visible {
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 10px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>display: none</h4>
   <div class="visible">
      This is visible
   </div>
   <div class="hidden">
      This is hidden
   </div>
   <div class="visible">
      This is also visible
   </div>
</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
display 4.0 8.5 3.0 3.1 7.0
css_properties_reference.htm

列印頁面
上一頁
下一頁
廣告