display: none

display: none;通常与 JavaScript 一起使用以隐藏 并显示元素而不删除和重新创建它们。看看我们最后的 此页面上的示例，如果您想知道如何实现这一点。

该元素用作默认值。<script>display: none;

覆盖默认显示值

如前所述，每个元素都有一个默认的显示值。但是，您可以覆盖此内容。

将内联元素更改为块元素（反之亦然）可用于 使页面看起来以特定的方式，并仍然遵循 Web 标准。

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

li {
  display: inline;
}

注意：设置元素的显示属性只会更改元素的显示方式， 不是它是什么类型的元素。因此，不允许使用 以包含其他块元素。display: block;

a {
  display: block;
}

隐藏元素：display:none 还是 visibility:hidden?

可以通过将属性display:none设置为 . 该元素将被隐藏，并且页面将显示为该元素不是 那里：

h1.hidden {
  display: none;
}

visibility:hidden;还隐藏了一个元素。

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

h1.hidden {
  visibility: hidden;
}