Display properties are very common in page layouts, but often use only a few property values such as block, Inline-block, inline, and none, and this article will detail all aspects of the display property
definitionThe 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 | Run-in | Table | inline-table | Table-row-group | Table-header-group | Table-footer-group | Table-row | Table-colume-group | Table-column | Table-cell | table-caption | Inherit
Initial value: Inline
Applies to: all elements
Inheritance: None
Note Ie7-Browser does not support table class property values and Inherit
Category blockCharacteristics
[1] Width is full line when width is not set
[2] Exclusive line
[3] Support wide height
Label
<address><article><aside><blockquote><body><dd><details><div> <dl><dt><fieldset><figcaption><figure><footer><form>[Note]menuitem tag only Firefox support
"Unsupported Styles"
[1]vertical-align
InlineCharacteristics
[1] Content open width
[2] Non-exclusive row
[3] Wide height not supported
[4] Code wrapping is parsed into a space
Label
<a><abbr><area><b><bdi><bdo><br><cite><code><del> <dfn><em><i><ins><kbd><label><map><mark><output><pre ><q><rp><rt><ruby><s><smap><small><span><strong>< Sub><sup><time><u><var><wbr>"Unsupported Styles"
[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-blockCharacteristics
[1] When width is not set, the content is open width
[2] Non-exclusive row
[3] Support wide height
[4] Code wrapping is parsed into a space
Label
<audio><button><canvas><embed><iframe><input><keygen>< Meter><object><progress><select><textarea><video>"Unsupported Styles"
[1]clear
"IE compatible"
The Ie7-browser does not support setting the Inline-block style for block-level elements, as follows: First turn it into an inline element, use an attribute with inline elements, and then trigger the haslayout to make its specific block-level element's attributes, So we can simulate the effect of inline-block.
Nonediv{ Display:inline-block; *display:inline; Zoom:1;Characteristics
Hiding elements and leaving the document flow
Label
List-item<base><link><meta><title><datalist><dialog><param><script>< Source><style>Characteristics
[1] Width is full line when width is not set
[2] Exclusive line
[3] Support wide height
Run-inRun-in is an interesting block/inline element blend that makes certain block-level elements the next element in the inline part. If an element generates a run-in box, and the box is followed by a block-level box, the run-in element becomes an inline box at the beginning of the Block-level box, and the run-in box is formatted as an inline box in another element, but they still inherit the property from the parent element in the document
[note] Only Safari and ie8+ support
If the run-in box is not followed by a block-level box, the run-in box itself becomes a block-level box
Table class elements<span style= "display:run-in" >run-in test</span><span>paragraph</span>table{display:table;} Thead{display:table-header-group;} Tbody{display:table-row-group;} Tfoot{display:table-footer-group;} Tr{display:table-row;} Td,th{display:table-cell;} Col{display:table-column;} Colgroup{display:table-column-group;} Caption{display:table-caption;}There are more than a few,<thead><tbody><tfoot><tr><col><colgroup> for the display of table class elements Because you cannot set margin and padding with less, the following will focus on the following <table>, <td>, <th>, <caption> these four labels corresponding display properties
TableCharacteristics
[1] width is open by content when not set width
[2] Exclusive line
[3] Support wide height
[4] Default table features, you can set Table-layout, Border-collapse, border-spacing and other table-specific properties
Inline-tableCharacteristics
[1] width is open by content when not set width
[2] Non-exclusive row
[3] Support wide height
[4] Default table features, you can set Table-layout, Border-collapse, border-spacing and other table-specific properties
Table-cellCharacteristics
[1] width is open by content when not set width
[2] Non-exclusive row
[3] Support wide height
[4] Vertical alignment
[5] Peer High
Table-captionCharacteristics
[1] width is open by content when not set width
[2] Exclusive line
[3] Support wide height
Precautions"1" If an element is an absolutely positioned element, the value of float is set to none, for a floating element or an absolutely positioned element, the calculated value is determined by the declared value
"2" for the root element, if declared as a value inline-table or table, the computed value table is obtained, the same calculated value is given when declared as none, and all other display values are computed as block
Original address: Http://www.cnblogs.com/xiaohuochai/p/5202761.html?utm_source=tuicool&utm_medium=referral#anchor2
Deep understanding of Display properties
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
