CSS Display(显示)

display属性指定由元素生成的框的类型,通常用到display对应值有block、none、inline这三个值。

CSS显示属性

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

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

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

以下部分描述了最常用的CSS显示值。

display属性的block值强制元素的行为类似于块级元素，例如<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>and <span>元素显示为内联块：

示例

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

display属性值为none时，使元素根本不生成任何框,并且在页面上不显示。子元素也不会生成任何框，即使它们的显示属性设置为非。呈现的文档好像该元素在文档树中不存在。

示例

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

注：display属性值为none的不会创建一个无形的盒子-它不产生任何框。也不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。请参阅“ 可见性与显示”部分中给出的实时演示。