Css 简明教程

CSS - display Property

CSS 中的 display 属性用于指定要在网页上如何显示元素。它控制元素的布局和显示。

display 属性有助于设置元素的内部和外部显示类型。

Possible Values

传递给 display 属性的值是关键字。这些关键字值按六组进行分类，如下所示：

Outside Values (<display-outside>) ：此标题下的值指定元素的外部显示类型。 inline ：使元素表现为内联元素，允许其他元素在同一行中出现在其旁边。例如：<span>, <img>, <a> 等。 block ：使元素表现为块级元素，占据其父元素的整个宽度，并在其前后换行。例如：<div>, <form>, <p> 等。
Inside Values (<display-inside>) ：此标题下的值指定元素的内部显示类型。 flow ：元素使用流布局（块级和内联布局）显示其内容。 flow-root ：元素显示一个块级框，其格式化根元素引用该块。 table ：定义了一个块级框，其行为与 HTML <table> 元素类似。 flex ：定义了一个块级框，其行为遵循弹性盒模型。 grid ：定义了一个块级框，其行为遵循网格模型。 ruby ：定义了一个内联元素，其行为遵循红宝石格式化模型。
List Item Values (<display-listitem>) ：使元素表现为列表项标记，通常与 <li> 元素一起使用。单个值表示单个列表项。可以与 list-style-type 和 list-style-position 一起使用。 list-item 可以与任何外部显示值配对，而 flow 或 flow-root 可以与内部显示值配对。
Internal Values (<display-internal>) ：具有复杂内部结构的布局（例如 table 和 ruby ）使用此属性显示它们的内容。 table-row-group ：行为类似于 HTML <tbody> 元素。 table-header-group ：行为类似于 HTML <thead> 元素。 table-footer-group ：行为类似于 HTML <tfoot> 元素。 table-row ：行为类似于 HTML <tr> 元素。 table-cell ：行为类似于 HTML <td> 元素。 table-column-group ：行为类似于 HTML <colgroup> 元素。 table-column ：行为类似于 HTML <col> 元素。 table-caption ：行为类似于 HTML <caption> 元素。 ruby-base ：行为类似于 HTML <rb> 元素。 ruby-text ：行为类似于 HTML <rt> 元素。 ruby-base-container ：生成为匿名框。 ruby-text-container ：行为类似于 HTML <rtc> 元素。
Box Values (<display-box>) ：定义是否由元素生成显示框。 contents ：元素的显示被其内容（即其子元素和伪元素）替代。 none ：关闭元素及其后代的显示。
Precomposed Values (<display-legacy>) ：一个预先组合的单关键字值。块级元素和内联元素都需要单独的关键字。 inline-block ：使元素显示为内联块级容器。与 inline flow-root 相同。 inline-table ：指定元素应表现为表格，但仍可在块级上下文中内联显示。与 inline table 相同。 inline-flex ：允许元素具有柔性盒布局，同时参与内联上下文。与 inline flex 相同。 inline-grid ：指定应将网格容器视为内联元素。与 inline grid 相同。

Applies to

所有 HTML 元素。

DOM Syntax

object.style.display = 'display:inline-flex';

CSS display - inline Value

以下是 display:inline 的示例：

<html>
<head>
<style>
   li {
      display: inline;
      font-size: 2rem;
      border: 1px solid red;
      margin: 5px;
   }
</style>
</head>
<body>
   <h2>Display - Inline</h2>
   <li>Item1</li>
   <li>Item2</li>
   <li>Item3</li>
   <li>Item4</li>
</body>
</html>

CSS display - block Value

以下是 display:block 的示例：

<html>
<head>
<style>
   li {
      display: block;
      font-size: 2rem;
      border: 1px solid red;
      margin: 5px;
      background-color:aquamarine;
      width: 200px;
   }
</style>
</head>
<body>
   <h2>Display - Block</h2>
   <li>Item1</li>
   <li>Item2</li>
   <li>Item3</li>
   <li>Item4</li>
</body>
</html>

CSS display - inline-block Value

以下是 display:inline-block 的示例：

<html>
<head>
<style>
   div {
      display: inline-block;
      font-size: 2rem;
      border: 1px solid red;
      margin: 5px;
      background-color: aquamarine;
      height: 100px;
      width: 200px;
   }
</style>
</head>
<body>
   <h2>display: inline-block</h2>
   <div>Inline-Block 1</div>
   <div>Inline-Block 2</div>
   <div>Inline-Block 3</div>
</body>
</html>

CSS display - none Value

以下是 display:none 的示例：

<html>
<head>
<style>
   div {
      font-size: 2rem;
      border: 1px solid red;
      margin: 5px;
      background-color: aquamarine;
      height: 100px;
      width: 200px;
   }
   div.ib {
      display: inline-block;
   }
   div.none {
      display:none;
   }
</style>
</head>
<body>
   <h2>display: none (Block 2)</h2>
   <div class="ib">Block 1</div>
   <div class="none">Block 2</div>
   <div class="ib">Block 3</div>
</body>
</html>

CSS display - With table Values

以下是 display:table, display:table-cell, display:table-row, display:table-caption 的示例：

<html>
<head>
<style>
   div {
      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>
   <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>

CSS display - flex Value

以下是 display:flex 的示例：

<html>
<head>
<style>
   div {
      display: flex;
      font-size: 2rem;
      border: 1px solid red;
      margin: 10px;
      background-color: aquamarine;
      height: 50px;
      width: 200px;
   }
</style>
</head>
<body>
   <h2>display: flex</h2>
   <div>Flex-Block 1</div>
   <div>Flex-Block 2</div>
   <div>Flex-Block 3</div>
</body>
</html>

CSS display - inline-flex Value

以下是 display:inline-flex 的示例：

<html>
<head>
<style>
   div {
      display: inline-flex;
      font-size: 2rem;
      border: 1px solid red;
      margin: 10px;
      background-color: aquamarine;
      height: 50px;
      width: 280px;
   }
</style>
</head>
<body>
   <h2>display: inline-flex</h2>
   <div>Inline Flex-Block 1</div>
   <div>Inline Flex-Block 2</div>
   <div>Inline Flex-Block 3</div>
</body>
</html>

CSS display - grid Value

以下是 display:grid 的示例：

<html>
<head>
<style>
   div {
      display: grid
      font-size: 2rem;
      border: 1px solid red;
      margin: 10px;
      background-color: aquamarine;
      height: 50px;
      width: 280px;
      marg
   }
</style>
</head>
<body>
   <h2>display: grid</h2>
   <div>grid-Block 1</div>
   <div>grid-Block 2</div>
   <div>grid-Block 3</div>
</body>
</html>

CSS display - inline-grid Value

以下是 display:inline-grid 的示例：

<html>
<head>
<style>
   div {
      display: inline-grid
      font-size: 2rem;
      border: 1px solid red;
      margin: 10px;
      background-color: aquamarine;
      height: 50px;
      width: 280px;
   }
</style>
</head>
<body>
   <h2>display: inline-grid</h2>
   <div>inline grid-Block 1</div>
   <div>inline grid-Block 2</div>
   <div>inline grid-Block 3</div>
</body>
</html>

CSS display - list-item Value

下面是 display:list-item 的一个示例：

<html>
<head>
<style>
   li {
      display: list-item;
      font-size: 2rem;
      border: 1px solid red;
      margin: 10px;
      background-color: aquamarine;
      height: 50px;
      width: 280px;
   }
</style>
</head>
<body>
   <h2>display: list-item</h2>
   <div>
      <ul>
         <li>list item 1</li>
         <li>list item 2</li>
         <li>list item 3</li>
      </ul>
   </div>
</body>
</html>