Deep understanding of Display properties

The display property is common in page layouts, but has never been known about the differences between his attributes, simply using the block, none property, and not for other properties, and today detailed learning and practice aspects of the display property

Defined

The display property is used to specify the type of box the element generates, affecting how it is displayed

Value: none | inline | Block | Inline-block | List-item

Default value: Inline

ie7-Browser does not know its table class property value

1. Block

Features: A, width is not set, width is full line B, exclusive line C, support width high

Unsupported Style Vertical-align

2. Inline

Features: A, content open width B, not exclusive line C, does not support width height 4, code wrapping is parsed into spaces

Unsupported styles: background-position Clear Clip Height | Max-height | Min-height | width | Max-width | min-width| Overflow | Text-align |text-indent | Text-overflow

3, Inline-block

Feature: A, when not set width, the content is open width B, not exclusive line 3, support width height 4, code wrapping is resolved into a space

Unsupported style: Clear

IE Compatibility: ie7-Browser does not support block-level element setting Inline-block style, workaround: change it into an inline element, make it an attribute of the inline element, and then trigger the haslayout to have the attribute of the block-level element. So we can simulate the effect of inline-block.

4. None

Features: Hiding elements and leaving the document flow

5, List-item

Features: A, width is not set, width is full line B, exclusive line C, support width high

Deep understanding of Display properties