CSS 显示

display 属性控制元素生成的框的类型。

CSS Display 属性

CSS 规范定义了所有元素的默认显示值，例如 <div> 元素呈现为块，而 <span> 元素内联显示。

覆盖元素的默认显示值是 display 属性的一个重要含义。例如，将内联级元素更改为显示为块级元素或将块级元素更改为显示为内联级元素。

注意： CSS display 属性是所有 CSS 中最强大和最有用的属性之一。它对于创建外观不同但仍遵循 Web 标准的网页非常有用。

以下部分向您介绍最常用的 CSS 显示值。

display 属性的 block 值强制元素表现得像 block-level 元素，像 <div> 或 <p> 元素。以下示例中的样式规则将 <span> 和 <a> 元素显示为块级元素：

span {
    display: block;
}
a {
    display: block;
}

注意：改变元素的显示类型只会改变元素的显示行为，不会改变元素的类型。例如，设置为 display: block; 的内联元素不允许在其中嵌套块元素。

display 属性的 inline 值使元素表现得好像它是 inline-level 元素，就像 <span> 或 <a> 元素一样。以下示例中的样式规则将 <p> 和 <li> 元素显示为内联元素：

p {
    display: inline;
}
ul li {
    display: inline;
}

display 属性的 inline-block 值会导致元素生成一个块框，该块框将与周围的内容一起流动，即与相邻内容在同一行中。以下样式规则将 <div> 和 <span> 元素显示为 inline-block：

div {
    display: inline-block;
}
span {
    display: inline-block;
}

none 值只会导致元素根本不生成框。子元素也不会生成任何框，即使它们的显示属性设置为非无。文档呈现为好像该元素在文档树中不存在。

h1 {
    display: none;
}
p {
    display: none;
}

注意： display 属性的值 none 不会创建不可见的框 — 它根本没有创建任何盒子。请参阅 visibility 与 display 部分中给出的现场演示。