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 |