CSS 显示

display属性

display属性指定元素是否/如何显示。每个HTML元素都有一个默认的显示值，具体取决于它的元素类型。大多数元素的默认显示值是block或inline。

块级元素始终在新行上开始并占用可用的全宽（尽可能向左和向右延伸）。

div元素是块级元素

块级元素的示例：

内联元素不会在新行上启动，只会占用所需的宽度。这是段落中的内联<span>元素。内联元素的示例：

display:none;通常与JavaScript一起使用来隐藏和显示元素而不删除和重新创建它们。如果您想知道如何实现这一点，请查看本页的最后一个示例。<script>元素display:none;用作默认值。

如上所述，每个元素都有一个默认的显示值。但是，您可以覆盖它。将内联元素更改为块元素（反之亦然）可能有助于使页面看起来特定，并且仍然遵循Web标准。一个常见的例子是<li>为水平菜单制作内联元素：

li {
             display: inline;
           }

尝试一下

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

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

span {
             display: block;
           }

尝试一下

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

a {
             display: block;
           }

尝试一下

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

h1.hidden {
             display: none;
           }

尝试一下

visibility:hidden; 也隐藏了一个元素。但是，该元素仍将占用与以前相同的空间。该元素将被隐藏，但仍会影响布局：

h1.hidden {
             visibility: hidden;
           }

尝试一下

属性	描述
display	指定元素的显示方式
visibility	指定元素是否应该可见