Home > Developer > Web Develop
Objective
Display in the design of the Web page is often used, the layout and size of the page has a great impact on the content, commonly used mainly have none, block, inline (default), Inline-block and several other properties, this article details about the various properties of display.
1. Definition
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 | Run-in | Table | inline-table | Table-row-group | Table-header-group | Table-footer-group | Table-row | Table-colume-group | Table-colume | Table-cell | table-caption | Inherit
Initial value: Inline
Inheritance: None
"Note" The Ie7-browser does not support table class property values and Inherit
2. Classification
"1" block
Characteristics
Width is the width of the parent element when "1" is not set to width
"2" Exclusive line
"3" Supports wide height
Label
<Address><article><aside><blockquote><Body><DD><Details><Div><DL><DT>
<fieldset><figcaption>< Figure><Footer><form><H1><Header><Hgroup><HR>
<HTML><legend><MenuItem><nav><ol><Optgroup><option><P>< Section><Summary><ul>
"Unsupported Styles"
"1" vertical-align
"2" inline
Characteristics
"1" Content open width
' 2 ' is not an exclusive line
"3" does not support wide height
"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
3.inline-block
Characteristics
"1" When the width is not set, the content is open width
"2" non-exclusive row
"3" Supports wide height
"4" code line breaks into spaces
Label
<Audio><Button><Canvas><Embed><iframe><img><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 have the attributes of a block-level element. So we can simulate the effect of inline-block.
4.none
Characteristics
Hiding elements and leaving the document flow
Label
<Base><Link><Meta><title><DataList><Dialog><param><Script><Source><style>
5.list-item
Characteristics
"1" does not set width, width is full line
"2" Exclusive line
"3" Supports wide height
6.run-in
Characteristics
Run-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
If the run-in box is not followed by a block-level box, the run-in box itself becomes a block-level box
"Note" Only Safari and ie8+ support
"Table class Element"
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
1.table
Characteristics
Width is stretched by content when "1" is not set to width
"2" Exclusive line
"3" Supports wide height
"4" has a table feature by default and is able to set table-layout
"Note" For display as table and inline-table, if the delimited border model is border-collapse:separate;,margin and padding can be set If you are in the merged border model, Border-collapse:collapse, you can only set margin
2.inline-table
Characteristics
Width is stretched by content when "1" is not set to width
"2" non-exclusive row
"3" Supports wide height
"4" has table characteristics by default
3.table-cell
Characteristics
Width is stretched by content when "1" is not set to width
"2" non-exclusive row
"3" Supports wide height
"4" Vertical alignment
"5" Peer equal height
Note The Display:table-cell element cannot set margin, but you can set the padding
4.table-caption
Characteristics
Width is stretched by content when "1" is not set to width
"2" Exclusive line
"3" Supports wide height
Note
The display:table-caption element's margin and padding can all be set
Detailed Display properties in CSS
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
