CSS中display的值

CSS中display的值

CSS文档中对display有这样的介绍：

9.2.4 The ‘display’ property

‘display’

• Value: inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
• Initial: inline
• Applies to: all elements
• Inherited: no
• Percentages: N/A
• Media: all
• Computed value: see text

The values of this property have the following meanings:

block
This value causes an element to generate a block box.

inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

inline
This value causes an element to generate one or more inline boxes.

list-item
This value causes an element (e.g., LI in HTML) to generate a principal block box and a marker box. For information about lists and examples of list formatting, please consult the section on lists.

none
This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the ‘display’ property on the descendants.

Please note that a display of ‘none’ does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption
These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).
The computed value is the same as the specified value, except for positioned and floating elements (see Relationships between ‘display’, ‘position’, and ‘float’) and for the root element. For the root element, the computed value is changed as described in the section on the relationships between ‘display’, ‘position’, and ‘float’.

Note that although the initial value of ‘display’ is ‘inline’, rules in the user agent’s default style sheet may override this value. See the sample style sheet for HTML 4 in the appendix.

Here are some examples of the ‘display’ property:

p { display: block }
em { display: inline }
li { display: list-item }
img { display: none } /* Do not display images */