css display属性详解

css display属性在对css做layout设计时非常重要，它的值有以下几种：

 

Value	Description	Play it
inline	Default value. Displays an element as an inline element (like <span>)	Play it »
block	Displays an element as a block element (like <p>)	Play it »
flex	Displays an element as an block-level flex container. New in CSS3
inline-block	Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box
inline-flex	Displays an element as an inline-level flex container. New in CSS3
inline-table	The element is displayed as an inline-level table
list-item	Let the element behave like a <li> element	Play it »
run-in	Displays an element as either block or inline, depending on context
table	Let the element behave like a <table> element
table-caption	Let the element behave like a <caption> element
table-column-group	Let the element behave like a <colgroup> element
table-header-group	Let the element behave like a <thead> element
table-footer-group	Let the element behave like a <tfoot> element
table-row-group	Let the element behave like a <tbody> element
table-cell	Let the element behave like a <td> element
table-column	Let the element behave like a <col> element
table-row	Let the element behave like a <tr> element
none	The element will not be displayed at all (has no effect on layout)	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit