css display显示属性 – CSS高级教程-srcmini

上一章CSS高级教程请查看：css可视格式化模型

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

CSS显示display属性

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

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

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

下面的部分将介绍最常用的CSS显示值。

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

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

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

display属性的内联值使元素的行为类似于内联级元素，类似于<span>或<a>元素。下面示例中的样式规则将<p>和<li>元素显示为内联级元素：

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

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

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

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

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

注意: display属性的值none不会创建一个不可见的框—它根本不创建任何框。