CSS3学习（五）：display 属性

CSS3学习（五）：display 属性

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

display 属性

display 属性规定是否/如何显示元素。
每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

• block 为块级元素（block element）
  • 块级元素总是从新行开始，并占据可用的全部宽度
• inline 为行内元素（inline element）
  • 内联元素不从新行开始，仅占用所需的宽度。

display: none;

display: none;通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。
默认情况下，<script> 元素使用 display: none;。

覆盖默认的 display 值

如前所述，每个元素都有一个默认 display 值。但是，您可以覆盖它。
将行内元素更改为块元素，反之亦然，对于使页面以特定方式显示同时仍遵循 Web 标准很有用。
一个常见的例子是为实现水平菜单而生成行内的 li 元素：

li {
  display: inline;
}

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

隐藏元素

通过将 display 属性设置为 none 可以隐藏元素。

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

区别：

• display: none; 该元素将被隐藏，并且页面将显示为好像该元素不在其中。
• visibility:hidden; 该元素将被隐藏，但该元素仍将占用与之前相同的空间，仍会影响布局。