CSS - display（显示）

上一页
下一页

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

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

可能的值

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

外部值 （<display-outside>）：此标题下的值指定元素的外部显示类型。

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

内部值 （<display-inside>）：此标题下的值指定元素的内部显示类型。

  • flow：元素使用流布局（块和内联布局）显示其内容
  • flow-root：Element 显示一个块框，引用其格式根。
  • table：定义一个块级框，其行为类似于 HTML<表>元素。
  • 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：行为类似于 <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-table：指定元素的行为应类似于表，但仍应在块级上下文中内联。与内联表相同。
  • inline-flex：允许元素在参与内联级上下文时具有灵活的框布局。与内联 flex 相同。
  • inline-grid：指定应将网格容器视为内联级元素。与内联网格相同。

适用于

所有 HTML 元素。

DOM 语法


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

CSS display - 内联值

下面是 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 - 块值

以下是 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 - 无 值

下面是 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 - 弹性值

以下是 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 - 网格值

下面是 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 - 列表项值

下面是 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>

打印本页
上一页
下一页