display属性

display属性指定是否/如何显示元素.

每个HTML元素都具有默认的显示值,这取决于元素的类型.大多数元素的默认显示值是block或inline.

单击以显示面板

块级(block-level)元素

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

下面的元素都是块级元素:

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

内联元素

内联元素不会从新行开始,只占用必要的宽度.

这是段落中的内联元素<span>.

内联元素示例:

• <span>
• <a>
• <img>

Display: none;

display:none;常用JavaScript来隐藏和显示元素，而不删除和重新创建元素.如果您想知道如何实现这一点,请看我们在此页面上的最后一个示例.

<script>元素使用display:none;作为默认值.

覆盖默认显示值

如前所述，每个元素都有一个默认的显示值.但是,您可以重写这个显示值.

将内联元素更改为块元素(反之亦然)对于使页面看起来像一种特定的显示方式非常有用,并且仍然遵循Web标准.

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

注意:设置元素的display属性的值,只更改元素的显示方式,而不是元素的类型. 因此,不允许具有display:block;的内联元素在其中包含其他块元素.

下面的示例将<span>元素显示为块元素:

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

隐藏元素 - display:none或visibility:hidden?

display:none

移除

visibility:hidden

隐藏

重置

重置

通过设置display属性为none来隐藏元素.该位置将会显示其它元素.

visibility:hidden;也会隐藏元素.

元素依然占用之前的空间.元素被隐藏了,但是任然影响布局:

更多例子

这个例子演示了display:none;和visibility:hidden;之间的差异.

这个示例演示了当鼠标单击元素时,怎么用CSS和JavaScript来显示元素.

CSS display/visibility属性