In-depth understanding of display attributes-common important attributes of front-end layout, and in-depth understanding of display

In-depth understanding of display attributes-common important attributes of front-end layout, and in-depth understanding of display

Note: The display attribute is very common in web page layout, but it is often used only a few attribute values, such as block, inline-block, inline, And none. I will introduce each aspect of the display attribute in detail below.

Definition

The display attribute specifies the box type generated by the element and affects the display mode.

Common Values: none | inline | block | inline-block | list-item

Initial Value: inline

Apply to: All elements

Inheritance: None

[Note] IE7-the browser does not support table attribute values and inherit

Classification block

[Features]

[1] If no width is set, the width is the width of the parent element.

[2] exclusive row

[3] Support for width and height

[Unsupported style]

[1] vertical-align

Inline

[Features]

[1] Open Content width

[2] A non-exclusive row

[3] width and height are not supported

[4] code line breaks are parsed into spaces

[Unsupported style]

[1] background-position

[2] clear

[3] clip

[4] height | max-height | min-height

[5] width | max-width | min-width

[6] overflow

[7] text-align

[8] text-indent

[9] text-overflow

Inline-block

[Features]

[1] when no width is set, the content is opened

[2] A non-exclusive row

[3] Support for width and height

[4] code line breaks are parsed into spaces

[Unsupported style]

[1] clear

None

[Features]

Hide elements and exit document flow

List-item

[Features]

[1] when no width is set, the width is full

[2] exclusive row

[3] Support for width and height