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：定义一个块级框，根据网格模型运行。
- ruby：定义一个内联级元素，并按照 ruby 格式化模型运行。
- <display-listitem>（列表项值 ）：使元素的行为类似于列表项标记，通常与 <li> 元素一起使用。
- 单个值表示单个列表项。
- 可以与 list-style-type 和 list-style-position 一起使用。
- list-item 可以与任何外部显示值以及 flow 或 flow-root 内部显示值配对。
- <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> 元素。
- <display-box>（框值）：定义显示框是否由元素生成。
- contents：元素的显示被其内容替换，即其子元素和伪元素。
- none：关闭元素及其后代的显示。
- <display-legacy>（预组合值）：预组合的单关键字值。需要为块级元素和内联级元素提供单独的关键字。
- inline-block：使元素显示为内联级别的块容器。与内联流根相同。
- inline-table：指定元素的行为应类似于表，但仍应在块级上下文中内联。与内联表相同。
- inline-flex：允许元素在参与内联级上下文时具有灵活的框布局。与内联 flex 相同。
- inline-grid：指定应将网格容器视为内联级元素。与内联网格相同。
适用于
所有 HTML 元素。
DOM 语法
object.style.display = 'display:inline-flex';
CSS display - 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>项目1</li> <li>项目2</li> <li>项目3</li> <li>项目4</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: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 值
以下是 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 值
下面是 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 - 使用表值
以下是 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 值
以下是 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 值
以下是 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 值
下面是 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 值
以下是 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 值
下面是 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>
