W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 显示(Display)



display 属性是极其重要的用来控制布局的CSS属性。


display 属性

display 属性设置一个元素应如何显示。

每个HTML元素都有一个默认的显示值取决于什么类型的元素。大多数元素的默认显示值是 blockinline

点我,快速学习计算机知识!

栈和队列的区别是啥?吃多了拉就是队列;吃多了吐就是栈。

怎么使用面向对象的方式变得富有?继承。


块元素

块元素是一个元素,占用了全部宽度,在前后都是换行符。

The <div> element is a block-level element.

块元素的例子:

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

内联元素

内联元素只需要必要的宽度,不强制换行。

This is an inline <span> element inside a paragraph.

内联元素的例子:

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

Display: none;

display: none; 通常被用于JavaScript隐藏或显示元素在不删除和创建它们的时候。如果你想知道这是如何实现的请查看我们的最后一个例子。


覆盖默认显示值

可以更改内联元素和块元素,反之亦然,可以使页面看起来是以一种特定的方式组合,并仍然遵循web标准。

下面的示例把列表项 <li> 显示为内联元素:

Example

li {
    display: inline;
}
尝试一下 »
Note 注意: 变更元素的显示类型看该元素是如何显示,它是什么样的元素。例如:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。

下面的实例把 <span> 元素作为块元素:

Example

span {
    display: block;
}
尝试一下 »

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

隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。

Example

h1.hidden {
    display: none;
}
尝试一下 »

Example

h1.hidden {
    visibility: hidden;
}
尝试一下 »

Examples

更多实例

display: none; versus visibility: hidden;
This example demonstrates display: none; versus visibility: hidden;

Using CSS together with JavaScript to show content
This example demonstrates how to use CSS and JavaScript to show an element on click.


CSS Display/Visibility 属性

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