css display屬性詳解

世有因果知因求果發表於2015-11-09

css display屬性在對css做layout設計時非常重要,它的值有以下幾種:

 

ValueDescriptionPlay 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  

相關文章