Layout CSS - Atribut display

display Properti ini adalah properti CSS yang paling penting untuk mengawal tata letak.

Properti display

display Properti ini menentukan sama ada/ bagaimana elemen akan dipaparkan.

Setiap elemen HTML mempunyai nilai display lalai, yang bergantung kepada jenis elemen. Sebagian besar elemen mempunyai nilai display lalai adalah block atau inline。

Klik untuk menunjukkan papan

Papan ini mengandungi elemen <div> yang secara lalai tersembunyi. (display: none)

它由 CSS 设置样式，我们使用 JavaScript 显示它。（更改为 display: block)

块级元素（block element）

块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。

这个 <div> 元素属于块级元素。

块级元素的一些例子：

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

行内元素（inline element）

内联元素不从新行开始，仅占用所需的宽度。

这是段落中的行内 <span> 元素。

行内元素的一些例子：

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

Display: none;

display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。如果您想知道如何实现此目标，请查看本页面上的最后一个实例。

默认情况下，<script> 元素使用 display: none;。

覆盖默认的 Display 值

如前所述，每个元素都有一个默认 display 值。但是，您可以覆盖它。

将行内元素更改为块元素，反之亦然，对于使页面以特定方式显示同时仍遵循 Web 标准很有用。

一个常见的例子是为实现水平菜单而生成行内的 <li> 元素：

实例

li {
  display: inline;
}

亲自试一试

注意：设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

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

实例

span {
  display: block;
}

亲自试一试

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

实例

a {
  display: block;
}

亲自试一试

隐藏元素 - display:none 还是 visibility:hidden？

display:none

visibility:hidden

Reset

通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中：

实例

h1.hidden {
  display: none;
}

亲自试一试

visibility:hidden; 也可以隐藏元素。

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

实例

h1.hidden {
  visibility: hidden;
}

亲自试一试

更多实例

display: none; 与 visibility: hidden; 之间的差异
本例演示 display: none; VS visibility: hidden;
结合使用 CSS 和 JavaScript 来显示内容
本例演示如何使用 CSS 和 JavaScript 在单击时显示元素。

属性 Display/Visibility CSS

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