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

上一章CSS高级教程请查看:css可视格式化模型
display属性控制由元素生成的框的类型。
CSS显示display属性CSS规范定义了所有元素的默认显示值,例如< div> 元素呈现为块,而< span> 元素内联显示。
更改默认显示值覆盖元素的默认显示值是display属性的一个重要含义。例如,将一个内联级元素更改为一个块级元素,或者将一个块级元素更改为一个内联级元素。
注意:CSS显示属性是所有CSS中最强大和最有用的属性之一,它对于创建外观不同但仍然遵循web标准的web页面非常有用。
下面的部分将介绍最常用的CSS显示值。
显示块display: blockdisplay属性的块值强制一个元素表现为块级元素,类似于< div> 或< p> 元素。以下示例中的样式规则将< span> 和< a> 元素显示为块级元素:

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

注意:素的显示类型只会更改元素的显示行为,而不会更改元素的类型。例如,一个内联元素设置为display:block; 不允许在其中嵌套块元素。
显示内联display: inlinedisplay属性的内联值使元素的行为类似于内联级元素,类似于< span> 或< a> 元素。下面示例中的样式规则将< p> 和< li> 元素显示为内联级元素:
p { display: inline; } ul li { display: inline; }

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

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

【css display显示属性 – CSS高级教程】注意: display属性的值none不会创建一个不可见的框—它根本不创建任何框。

    推荐阅读