CSS - 显示

CSS显示

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

display属性在设置元素的内部和外部显示类型时很有用。

可能的值

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

外部值 (<display-outside>)

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

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

内部值 (<display-inside>)

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

flow：元素使用流布局（块和内联布局）显示其内容
flow-root：元素显示一个块框，引用其格式根。
table：定义块级框，其Behave类似于 HTML <table> 元素。
flex：定义块级框，其Behave与 Flexbox 模型一致。
grid：定义块级框，Behave按照网格模型。
ruby：定义内联级元素并按照 ruby 格式化模型运行。

列出项目值 (<display-listitem>)

使元素的Behave类似于列表项标记，通常与 <li> 元素一起使用。

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

内部值 (<显示内部>)

具有复杂内部结构的布局，例如table和ruby 使用此属性来显示其内容。

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

框值 (<显示框>)

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

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

预组合值 (<display-legacy>)

预先组合的单关键字值。块级元素和内联级元素需要单独的关键字。

inline-block：使元素显示为内联级块容器。与内联 flow-root相同。
inline-table：指定元素的Behave应类似于表格，但仍内联在块级上下文中。与内联表相同。
inline-flex：允许元素在参与内联级别上下文时具有灵活的框布局。与内联 Flex相同。
inline-grid：指定网格容器应被视为内联级元素。与内嵌网格相同。

适用于

所有 HTML 元素。

DOM语法

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

CSS 显示 - 内联

这是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的示例：

<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 显示 - 内联块

这是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 显示 - 无

这是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 显示 - 表格

以下是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的示例：

<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 显示 - 网格

以下是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 显示 - 内联网格

这是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 显示 - 列表项

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