CSS 显示

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

CSS 显示属性

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

更改默认显示值

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

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

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

显示块

display 属性的 block 值强制元素的行为类似于块级元素，如 <div> 或 <p> 元素。以下示例中的样式规则将 <span> 和 <a> 元素显示为块级元素：

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

显示内联

display 属性的 inline 值使元素的行为就像它是一个内联级元素，如 <span> 或 <a> 元素。以下示例中的样式规则将 <p> 和 <li> 元素显示为内联级元素：

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

显示内联块

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

显示无

该值 none 只会导致元素根本不生成任何框。子元素也不生成任何框，即使它们的 display 属性设置为 none 以外的其他元素。呈现文档，就好像文档树中不存在该元素一样。

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

注： display 属性的值 none 不会创建一个无形的盒子-它创造没有框的。查看内部可见性与显示部分的实时演示。