前端必知必会-CSS布局display属性

---

CSS 布局 - display 属性

display 属性是控制布局最重要的 CSS 属性。
display 属性用于指定元素在网页上的显示方式。

每个 HTML 元素都有一个默认的 display 值，具体取决于元素类型。大多数元素的默认 display 值是 block 或 inline。

display 属性用于更改 HTML 元素的默认显示行为。

块级元素

块级元素始终从新行开始并占据整个可用宽度（尽可能向左和向右伸展）。
块级元素示例：

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

内联元素

内联元素不会从新行开始，并且只占用必要的宽度。
内联元素的示例：

<span>
<a>
<img>

display 属性值

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 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。
<script> 元素默认使用 display: none;。

覆盖默认显示值

如上所述，每个元素都有一个默认显示值。但是，您可以覆盖它。

将内联元素更改为块元素，或反之亦然，对于使页面看起来具有特定方式很有用，同时仍然遵循 Web 标准。

一个常见示例是为水平菜单制作内联 <li> 元素：

示例

li {
display: inline;
}

注意：设置元素的显示属性只会改变元素的显示方式，而不会改变元素的类型。因此，带有 display: block; 的内联元素不允许包含其他块元素。

以下示例将 <span> 元素显示为块元素：

示例

span {
display: block;
}

以下示例将 <a> 元素显示为块元素：

示例

a {
display: block;
}

隐藏元素 - display:none 还是visibility:hidden？

可以通过将 display 属性设置为 none 来隐藏元素。元素将被隐藏，页面将显示为元素不存在：

示例

h1.hidden {
display: none;
}

visibility:hidden; 也会隐藏元素。

但是，元素仍将占用与之前相同的空间。该元素将被隐藏，但仍会影响布局：

示例

h1.hidden {
visibility: hidden;
}

---

总结

本文介绍了的CSS布局display属性使用，如有问题欢迎私信和评论