English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The CSS display property specifies the type of box generated by the element.
The table below provides usage instructions and version history for this property, as well as the syntax for using it in JavaScript scripts.
| Default Value: | inline |
|---|---|
| Applies to: | All elements |
| Inheritance: | None |
| Animated: | No.See also Animation Properties. |
| Version: | CSS 1,2,3 |
| JavaScript Syntax: | object.style.display="block" |
The computed value of the display property may differ from the root element andfloatingorAbsolutely positioned elementsof different specified values.
If the value of the display property is set to none, the element does not generate any box and has no effect on the layout; the element and its content are completely removed from the formatting structure, and the document is presented as if the element does not exist in the document tree.
The syntax of this property is as follows:
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
The following examples demonstrate how to use the display property.
div {
display: inline;
}
span {
display: block;
}Test to see‹/›The table below describes the value of this property.
| value | description |
|---|---|
| inline | element generates ainline-levelboxes. |
| block | element generates ablock-levelboxes. |
| contents | element itself does not generate any box, but its childrenelementandpseudo-elementbox, and the text runs normally. |
| flex | element generates a block-levelFlexible container box. |
| flow | element uses flow layout (block and inline layout) to layout its content. |
| flow-root | element generates a block container box and uses flow layout to layout the content. |
| grid | element generates a block-level grid container box. |
| inline-block | element generates a block box, whose layout is like an embedded box. |
| inline-flex | element generates an inline-level flex container box. |
| inline-grid | element generates an inline-level grid container box. |
| inline-table | This element behaves like a table, like an inline box. |
| list-item | element generates a block box for content and a separate inline box for list markers. |
| run-in | This element generates a block or inline box depending on the context. |
| table | The behavior of this element is similar to<table>HTML element. |
| table-caption | The behavior of this element is similar to<caption>HTML element. |
| table-column-group | The behavior of this element is similar to<colgroup>HTML element. |
| table-header-group | The behavior of this element is similar to<thead>HTML element. |
| table-footer-group | The behavior of this element is similar to<tfoot>HTML element. |
| table-row-group | The behavior of this element is similar to<tbody>HTML element. |
| table-cell | The behavior of this element is similar to<td>HTML element. |
| table-column | The behavior of this element is similar to<col>HTML element. |
| table-row | The behavior of this element is similar to<tr>HTML element. |
| none | Close the display of the element. Even if all the display attributes of the child elements are set to none, the display will also be closed. |
| initial | Set this attribute to its default value. |
| inherit | If specified, the associated elements will adopt the display attribute value of their parent element. |
Browser compatibility of the display attribute of browsers, the numbers in the following table indicate the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.
|
Warning:values, such as contents, flow-root, run-in and others are not well supported in most browsers. It is best to avoid using them temporarily.
Please refer to the following tutorials:CSS Display.
Related attributes:visibility,float,position.