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 显示/可见性属性
属性 | 描述 |
---|---|
显示 | 指定元素应该如何显示 |
可见性 | 指定元素是否应该可见 |