CSS - display（显示）_CSS 菜鸟教程

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>

<< CSS - :hover（悬停） CSS - focus 属性 >>