极客教程CSS Display属性
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 : 定义为块级框，遵循grid模型的行为。
-
ruby : 定义为内联级元素，行为类似于ruby格式化模型。
列表项值（<display-listitem>）
使元素表现得像一个列表项标记，通常与<li>元素一起使用。
- 单个值表示一个列表项。
-
可以与list-style-type和list-style-position一起使用。
-
列表项可以与任何外部显示值以及内部显示值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 flow-root 相同。
-
inline-table ：指定元素应该像表格一样行为，但仍然在块级上下文中内联显示。与 inline table 相同。
-
inline-flex ：允许元素具有一个灵活的盒子布局，同时参与内联级上下文。与 inline flex 相同。
-
inline-grid ：指定网格容器应被视为内联级元素。与 inline grid 相同。
适用于
所有的HTML元素。
DOM语法
object.style.display = 'display:inline-flex';
CSS 显示 – 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:#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 显示 – inline-block
下面是一个使用 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 显示 – none
这是一个关于 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 显示-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 显示–flex布局
下面是一个 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 显示 – grid
这是一个关于 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 显示 – inline-grid
以下是一个例子，展示了 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 显示 – 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>