CSS display 属性
说明
display CSS 属性指定元素生成的框的类型。
下表总结了此属性的使用上下文和版本历史记录。
| 默认值： | inline |
|---|---|
| 适用于： | 所有元素 |
| 继承： | No |
| 动画： | No. 参见动画属性。 |
| 版本： | CSS 1, 2, 3 |
使用说明
display属性的计算值可能与根元素和 floated 或 absolutely positioned elements 的指定值不同。如果
display属性的值设置为none— 该元素根本不生成框，并且对布局没有影响； 元素及其内容完全从格式化结构中删除，并且呈现文档，就好像该元素在文档树中不存在一样。
语法
属性的语法如下：
| display: | inline | block | contents | flex | flow | flow-root | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit |
下面的示例显示了 display 属性的作用。
div {
display: inline;
}
span {
display: block;
}属性值
下表描述了该属性的值。
| 值 | 说明 |
|---|---|
inline |
该元素生成一个 内联级 框。 |
block |
该元素生成一个块级框。 |
contents |
元素本身不会生成任何框，但它的子元素和 伪元素 会生成框，并且文本会正常运行。 |
flex |
该元素生成一个块级的弹性容器盒。 |
flow |
元素使用流布局（块和内联布局）来布局其内容。 |
flow-root |
该元素生成一个块容器框，并使用流布局对其内容进行布局。 |
grid |
元素生成块级网格容器框。 |
inline-block |
该元素生成一个块状盒子，其布局就像一个内联盒子。 |
inline-flex |
该元素生成一个内联级弹性容器框。 |
inline-grid |
该元素生成一个内联网格容器框。 |
inline-table |
该元素的行为就像一个表格，其布局就像一个内联框。 |
list-item |
该元素为内容生成一个块框，为列表标记生成一个单独的内联框。 |
run-in |
元素根据上下文生成块或内联框。 |
table |
元素的行为类似于 <table> HTML 元素。 |
table-caption |
该元素的行为类似于 <caption> HTML 元素。 |
table-column-group |
该元素的行为类似于 <colgroup> HTML 元素。 |
table-header-group |
该元素的行为类似于 <thead> HTML 元素。 |
table-footer-group |
该元素的行为类似于 <tfoot> HTML 元素。 |
table-row-group |
该元素的行为类似于 <tbody> HTML 元素。 |
table-cell |
该元素的行为类似于 <td> HTML 元素。 |
table-column |
该元素的行为类似于 <col> HTML 元素。 |
table-row |
该元素的行为类似于 <tr> HTML 元素。 |
none |
关闭元素的显示。 所有子元素的显示也会关闭，即使它们的显示属性设置为非无。 |
initial |
将此属性设置为其默认值。 |
inherit |
如果指定，则关联元素采用其父元素 display 属性的 计算值。 |
浏览器兼容性
所有主要的现代浏览器都支持 display 属性。
 |
基本支持—
|
警告：大多数浏览器对 contents, flow-root, run-in 等值的支持很差。 您最好暂时避免使用它们。
进一步阅读
请参阅以下教程： CSS 显示.
相关属性： visibility, float, position.
Advertisements