CSS 布局 - display 属性
The display 属性是控制布局最重要的 CSS 属性。
display 属性
The display 属性用于指定元素在网页上的显示方式。
每个 HTML 元素都有一个默认的 display 值，具体取决于元素的类型。大多数元素的默认 display 值为 block 或 inline。
The display 属性用于更改 HTML 元素的默认显示行为。
块级元素
块级元素始终从新行开始，并占据可用的全部宽度（向左和向右尽可能延伸）。
块级元素示例
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
内联元素
内联元素不会从新行开始，只占据必要的宽度。
这是 一个段落内的内联 <span> 元素.
内联元素示例
- <span>
- <a>
- <img>
display 属性值
The display 属性有许多值
| 值 | 描述 |
|---|---|
| inline | 将元素显示为内联元素 |
| block | 将元素显示为块级元素 |
| contents | 使容器消失，使子元素成为 DOM 中上一级元素的子元素 |
| flex | 将元素显示为块级弹性容器 |
| grid | 将元素显示为块级网格容器 |
| inline-block | 将元素显示为内联级块容器。元素本身格式化为内联元素，但可以应用高度和宽度值 |
| inline-flex | 将元素显示为内联级弹性容器 |
| inline-grid | 将元素显示为内联级网格容器 |
| inline-table | 元素显示为内联级表格 |
| list-item | 让元素的行为类似于 <li> 元素 |
| run-in | 根据上下文将元素显示为块级或内联元素 |
| 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-column | 让元素的行为类似于 <col> 元素 |
| table-row | 让元素的行为类似于 <tr> 元素 |
| none | 元素被完全删除 |
| initial | 将此属性设置为其默认值 |
| inherit | 从其父元素继承此属性 |
Display: none;
display: none; 通常与 JavaScript 一起使用来隐藏和显示元素，而无需删除和重新创建它们。如果您想了解如何实现这一点，请查看此页面上的最后一个示例。
The <script> 元素默认使用 display: none;。
点击显示面板
此面板包含一个 <div> 元素，默认情况下是隐藏的 (display: none;)。
它使用 CSS 进行样式化，我们使用 JavaScript 来显示它（将其更改为（display: block;）。
覆盖默认显示值
如前所述，每个元素都有一个默认的显示值。但是，您可以覆盖它。
将内联元素更改为块元素，反之亦然，对于使页面看起来特定方式并且仍然遵循 Web 标准很有用。
一个常见的例子是为水平菜单创建内联 <li> 元素
注意：设置元素的 display 属性只会更改元素的显示方式，而不是元素的类型。因此，具有 display: block; 的内联元素不允许在其中包含其他块元素。
以下示例将 <span> 元素显示为块元素
以下示例将 <a> 元素显示为块元素
隐藏元素 - display:none 或 visibility:hidden？
display:none
visibility:hidden
重置
隐藏元素可以通过将 display 属性设置为 none 来完成。该元素将被隐藏，并且页面将显示为好像元素不存在。
visibility:hidden; 也隐藏元素。
但是，该元素仍然会占用与之前相同的空间。该元素将被隐藏，但仍然会影响布局
更多示例
display: none; 和 visibility: hidden; 之间的区别
此示例演示了 display: none; 与 visibility: hidden; 之间的区别。
显示更多显示类型
此示例演示了更多显示类型。
将 CSS 与 JavaScript 结合使用以显示内容
此示例演示了如何使用 CSS 和 JavaScript 在单击时显示元素。
CSS 显示/可见性属性
| 属性 | 描述 |
|---|---|
| 显示 | 指定元素应该如何显示 |
| 可见性 | 指定元素是否应该可见 |
