CSS Display属性

CSS中的display属性用于指定元素在网页上的显示方式。它控制元素的布局和可见性。

display属性在设置元素的内部和外部显示类型方面非常有用。

可能的值

传递给display属性的值是一个关键字。这些关键字值可分为六个不同的组，如下所示：

外部值（`<display-outside>`）

该类别下的值指定元素的外部显示类型。

inline : 使元素表现得像一个内联元素，允许其他元素在同一行上出现。示例：<span>, <img>, <a>等。
block : 使元素表现得像一个块级元素，占据其父容器的整个宽度，并在其前后创建新行。示例：<div>, <form>, <p>等。

内部值（`<display-inside>`）

该类别下的值指定元素的内部显示类型。

flow : 元素使用流动布局（块级和内联布局）显示其内容。
flow-root : 元素显示为块级框，参考其格式化根。
table : 定义为块级框，行为类似于HTML的<table>元素。
flex : 定义为块级框，遵循flexbox模型的行为。
grid : 定义为块级框，遵循grid模型的行为。
ruby : 定义为内联级元素，行为类似于ruby格式化模型。

列表项值（`<display-listitem>`）

使元素表现得像一个列表项标记，通常与<li>元素一起使用。

单个值表示一个列表项。
可以与list-style-type和list-style-position一起使用。
列表项可以与任何外部显示值以及内部显示值flow或flow-root配对使用。

内部值（`<display-internal>`）

复杂的布局，比如 table 和 ruby ，使用这个属性来显示它们的内容。

table-row-group ：表现得像 < tbody> HTML元素。
table-header-group ：表现得像 < thead> HTML元素。
table-footer-group ：表现得像 < tfoot> HTML元素。
table-row ：表现得像 < tr> HTML元素。
table-cell ：表现得像 < td> HTML元素。
table-column-group ：表现得像 < colgroup> HTML元素。
table-column ：表现得像 < col> HTML元素。
table-caption ：表现得像 < caption> HTML元素。
ruby-base ：表现得像 < rb> HTML元素。
ruby-text ：表现得像 < rt> HTML元素。
ruby-base-container ：生成作为匿名框。
ruby-text-container ：表现得像 < rtc> HTML元素。

盒子值（`<display-box>`）

定义元素是否生成显示框。

contents ：元素的显示被其内容替代，即其子元素和伪元素。
none ：关闭元素及其后代的显示。

预组成值（`<display-legacy>`）

预组成的单关键字值。需要单独的关键字来适用于块级和内联级元素。

inline-block ：使元素显示为内联级块容器。与 inline flow-root 相同。
inline-table ：指定元素应该像表格一样行为，但仍然在块级上下文中内联显示。与 inline table 相同。
inline-flex ：允许元素具有一个灵活的盒子布局，同时参与内联级上下文。与 inline flex 相同。
inline-grid ：指定网格容器应被视为内联级元素。与 inline grid 相同。

适用于

所有的HTML元素。

DOM语法

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

CSS 显示 – inline

这是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

这是一个关于 display:block 的示例：

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

CSS 显示 – inline-block

下面是一个使用 display:inline-block 的示例：

<html>
<head>
<style>
   div {
      display: inline-block;
      font-size: 2rem;
      border: 1px solid red;
      margin: 5px;
      background-color: #239327;
      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 显示 – none

这是一个关于 display:none 的示例：

<html>
<head>
<style>
   div {
      font-size: 2rem;
      border: 1px solid red;
      margin: 5px;
      background-color: #239327;
      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 显示-table

这是一个例子，用于 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 显示–flex布局

下面是一个 display:flex 的示例：

<html>
<head>
<style>
   div {
      display: flex;
      font-size: 2rem;
      border: 1px solid red;
      margin: 10px;
      background-color: #239327;
      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 显示- inline-flex

这是一个示例，展示了 display:inline-flex :

<html>
<head>
<style>
   div {
      display: inline-flex;
      font-size: 2rem;
      border: 1px solid red;
      margin: 10px;
      background-color: #239327;
      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 显示 – grid

这是一个关于 display:grid的例子 ：

<html>
<head>
<style>
   div {
      display: grid
      font-size: 2rem;
      border: 1px solid red;
      margin: 10px;
      background-color: #239327;
      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 显示 – inline-grid

以下是一个例子，展示了 display:inline-grid 的使用：

<html>
<head>
<style>
   div {
      display: inline-grid
      font-size: 2rem;
      border: 1px solid red;
      margin: 10px;
      background-color: #239327;
      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 显示 – list-item

这是一个例子 显示：列表项 :

<html>
<head>
<style>
   li {
      display: list-item;
      font-size: 2rem;
      border: 1px solid red;
      margin: 10px;
      background-color: #239327;
      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>