CSS显示



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


display 属性

display 性指定元素是否显示。

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


块级元素

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

这个 <div> 元素是块级元素

块级元素的例子:

  • <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 属性

属性 描述
display 指定如何显示元素
visibility 定元素是否可见