CSS显示

display 属性是控制布局最重要的CSS属性

display 属性

display 性指定元素是否显示。

每个HTML元素都有一个默认显示的值，这取决于它是什么类型的元素. 大多数元素的默认显示值为 block块级元素 或者 inline行内元素.

块级元素

块级元素总是从新行开始，占用可用的全部宽度(延伸到左边和右边尽可能).

块级元素的例子:

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

行内元素

内联元素不在新行上启动，只占用必要的宽度.

这是一个 行内 <span> 元素 在这个段落里面

行内元素的例子:

• ``
• <a>
• <img>

Display: none;

display: none; 通常与JavaScript一起使用，隐藏和显示元素而不会删除和重新创建它们. 如果你想知道这是如何实现的，看看我们的最后一个例子。

<script> 默认使用 display: none;.

覆盖默认显示值

如上所述，每个元素都有默认显示值。但是，你可以重写这个。

将内联元素更改为块元素，反之亦然，可以使页面看起来特别，并且仍然遵循web标准。

一个常见的例子就是将<li>,改为行内元素，实现一个水平菜单

li {
    display: inline;
}

让我试试

注意：设置元素的显示属性只会改变元素的显示方式, 不会改变元素的类型. 因此，一个行内元素，修改 display: block; 不允许在其内部在添加其他块级元素。

下面的实例将`` 作为块级元素显示。

span {
    display: block;
}

让我试试

下面的实例将<a>元素作为块级元素显示:

a {
    display: block;
}

让我试试

隐藏一个元素 - display:none 还是 visibility:hidden?

隐藏元素可以通过将显示属性设置为。该元素将被隐藏，并且该页将显示，如果该元素不存在：

h1.hidden {
    display: none;
}

让我试试

visibility:hidden; 还藏着一个元素

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

h1.hidden {
    visibility: hidden;
}

让我试试

CSS Display/Visibility 属性