CSS display 是 CSS 最重要的属性，用于控制元素的布局。它指定元素的显示方式。
每个元素根据其性质都有一个默认的显示值。网页上的每个元素都是一个矩形框，CSS属性定义了该矩形框的行为。
| 默认值 | 排队 |
| 遗传 | 不 |
| 动画支持 | 不 |
| 版本 | css1 |
| JavaScript 语法 | object.style.display="无" |
display:value;
有以下常用的 CSS 显示值。
显示：内联；
显示：内联块；
显示：块；
显示：磨合；
显示：无；
内联元素仅采用所需的宽度。它不会强制换行，因此文本流不会在内联示例中中断。
内联元素是：
<span>
<a>
<em>
<b> etc.
让我们看一个 CSS 显示内联的例子。
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline;
}
</style>
</head>
<body>
<p>Hello rocschool.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>2) CSS 显示 inline-block
CSS display inline-block 元素与 inline 元素非常相似，但不同之处在于您可以设置宽度和高度。
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline-block;
}
</style>
</head>
<body>
<p>Hello rocschool.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>3) CSS 显示块
CSS 显示块元素尽可能多地占用水平空间。意味着块元素采用完整的可用宽度。他们在他们之前和之后换行。
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: block;
}
</style>
</head>
<body>
<p>Hello rocschool.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>4) CSS 显示磨合
此属性在Mozilla Firefox 中不起作用。这些元素本身不会产生特定的盒子。
如果磨合框包含一个块框，它将与块相同。
如果块框在插入框之后，则插入框将成为块框的第一个内嵌框。
如果 inline box 跟在 run-in box 之后，run-in box 就变成了 block box。
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: run-in;
}
</style>
</head>
<body>
<p>Hello rocschool.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>5) CSS 显示无
“none”值完全从页面中删除元素。它不会占用任何空间。
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This heading is visible.</h1>
<h1 class="hidden">This is not visible.</h1>
<p>You can see that the hidden heading does not contain any space.</p>
</body>
</html>其他 CSS 显示值
属性值 | 描述 |
|---|---|
| flex | 它用于将元素显示为块级 flex 容器。它是 css3 中的新功能。 |
| inline-flex | 它用于将元素显示为内联级 flex 容器。它是 css3 中的新功能。 |
| inline-table | 它将元素显示为内联级表。 |
| list-Item | 它使元素表现得像一个 <li> 元素。 |
| table | 它使元素表现得像一个 <table> 元素。 |
| table-caption | 它使元素表现得像一个 <caption> 元素。 |
| table-column-group | 它使元素表现得像一个 <colgroup> 元素。 |
| table-header-group | 它使元素表现得像一个 <thead> 元素。 |
| table-footer-group | 它使元素表现得像一个 <tfoot> 元素。 |
| table-row-group | 它使元素表现得像一个 <tbody> 元素。 |
| table-cell | 它使元素表现得像一个 <td> 元素。 |
| table-row | 它使元素表现得像一个 <tr> 元素。 |
| table-column | 它使元素表现得像一个 <col> 元素。 |