CSS 布局 - display 属性
display 属性是控制布局最重要的 CSS 属性。
display 属性
display 属性用于指定一个元素在网页上的显示方式。
每个 HTML 元素都有一个默认的 display 值，取决于它是哪种类型的元素。大多数元素的默认 display 值是 block 或 inline。
display 属性用于更改 HTML 元素的默认显示行为。
块级元素
块级元素总是从新行开始，并占据所有可用宽度（向左和向右拉伸到最大）。
块级元素的示例
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
行内元素
行内元素不会从新行开始，并且只占据必要的宽度。
这是一个段落内的行内 <span> 元素。
行内元素的示例
- <span>
- <a>
- <img>
display 属性值
display 属性有许多值
| 值 | 描述 |
|---|---|
| inline | 将元素显示为行内元素 |
| block | 将元素显示为块级元素 |
| contents | 使容器消失，使其子元素成为 DOM 中上一级的子元素 |
| flex | 将元素显示为块级 flex 容器 |
| grid | 将元素显示为块级 grid 容器 |
| inline-block | 将元素显示为行内块级容器。元素本身被格式化为行内元素，但你可以设置高度和宽度值 |
| inline-flex | 将元素显示为行内 flex 容器 |
| inline-grid | 将元素显示为行内 grid 容器 |
| inline-table | 元素显示为行内 table |
| list-item | 让元素表现得像一个 <li> 元素 |
| run-in | 根据上下文，将元素显示为 block 或 inline |
| 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 一起使用，用于在不删除和重新创建元素的情况下隐藏和显示元素。如果你想知道如何实现这一点，请查看本页的最后一个示例。
<script> 元素默认使用 display: none;。
点击显示面板
此面板包含一个 <div> 元素，该元素默认隐藏（display: none;）。
它通过 CSS 设置样式，我们使用 JavaScript 来显示它（将其更改为 (display: block;）。
覆盖默认的 display 值
如前所述，每个元素都有一个默认的 display 值。但是，你可以覆盖它。
将行内元素更改为块级元素，反之亦然，这对于使页面看起来特定方式并仍然遵循 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; 的区别。
显示更多 display 类型
此示例演示了更多 display 类型。
结合使用 CSS 和 JavaScript 来显示内容
此示例演示了如何使用 CSS 和 JavaScript 在点击时显示元素。
CSS Display/Visibility 属性
| 属性 | 描述 |
|---|---|
| display | 指定元素应如何显示 |
| 可见性 | 指定元素是否应该可见 |
