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。
列表项可以与任何外部显示值以及内部显示值的流或流根配对。
内部值（<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-text:行为类似于 <rt> HTML 元素。 p>
ruby-base-container:生成为匿名框。
ruby-text-container:行为类似于 <rtc> HTML 元素。
框值 (<display-box>):定义显示框是否由元素生成。
contents:元素的显示被其内容（即其子元素和伪元素）替换。
none:关闭元素及其后代元素的显示。
预组合值 (<display-legacy>):单关键字值这是预先组合好的。块级元素和内联级元素需要单独的关键字。
inline-block:使元素显示为内联级块容器。与内联 flow-root 相同。
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>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: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: 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 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>