Detailed introduction to the display attribute in CSS

CSS display Attributes

All major browsers support the display attribute.

Note: If !DOCTYPE is specified, Internet Explorer 8 (and later) supports the attribute values ​​"inline-table", "run-in", "table", " table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit".

Definition and Usage

The display attribute specifies the type of box that the element should generate.

Description

This attribute is used to define the type of display box generated by the element when creating the layout. For document types such as HTML, using display carelessly can be dangerous, as it may violate the display hierarchy already defined in HTML. For XML, since XML does not have this hierarchical structure built in, all display is absolutely necessary.

Note: The values ​​compact and marker were present in CSS2, but have been removed from CSS2.1 due to lack of widespread support.

default value:	inline
InheritanceSex:	no
Version:	CSS1
JavaScript Syntax:	object.style.display="inline"

Possible values

Value	describe
none	This element will not be displayed.
block	This element will be displayed as a block-level element, with line breaks before and after this element.
inline	default. This element will be displayed as an inline element, with no line breaks before or after the element.
inline-block	Inline block elements. (CSS2.1 New value of )
list-item	This element will be displayed as a list.
run-in	This element will be displayed as a block-level element or an inline element depending on the context.
compact	There is a value compact in CSS, but it has been removed from CSS2.1 due to lack of widespread support.
marker	Value markers were present in CSS, but were removed from CSS2.1 due to lack of widespread support.
table	This element will be displayed as a block-level table (similar to ), with line breaks before and after the table. inline-table This element will be displayed as an inline table (similar to ), with no line breaks before or after the table. ). ). ). ). ). ) table-row-group This element will be displayed as a grouping of one or more rows (something like table-header-group This element will be displayed as a grouping of one or more rows (something like table-footer-group This element will be displayed as a grouping of one or more rows (something like table-row This element will be displayed as a table row (similar to table-column-group This element will be displayed as a grouping of one or more columns (something like table-column This element will be displayed as a column of cells (similar to table-cell This element will appear as a table cell (similar to and ) table-caption This element will be displayed as a table title (similar to ) inherit Specifies that the value of the display attribute should be inherited from the parent element.

The above is the detailed content of Detailed introduction to the display attribute in CSS. For more information, please follow other related articles on the PHP Chinese website!