A deep understanding of the display attribute and a deep understanding of the display

Last Update:2016-02-20 Source: Internet

Author: User

Tags unsupported

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

A deep understanding of the display attribute and a deep understanding of the display
Directory [1] block [2] inline [3] inline-block [4] none [5] list-item [6] run-in [7] table [8] inline- table [9] Before table-cell [10] table-caption

The display attribute is very common in web page layout, but it is often used only a few attribute values, such as block, inline-block, inline, And none. This article will detail all aspects of the display attribute.

Definition

The display attribute specifies the box type generated by the element and affects the display mode.

Initial Value: inline

Apply to: All elements

Inheritance: None

[Note] IE7-the browser does not support table attribute values and inherit

Classification block

[Features]

[1] when no width is set, the width is full

[2] exclusive row

[3] Support for width and height

[Tag]

<address><article><aside><blockquote><body><dd><details><div><dl><dt><fieldset><figcaption><figure><footer><form>
[Note] the menuitem tag is only supported by firefox.
[Unsupported style]
[1] vertical-align
 Inline
[Features]
[1] Open Content width
[2] A non-exclusive row
[3] width and height are not supported
[4] code line breaks are parsed into spaces
[Tag]
<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 style]
[1] background-position
[2] clear
[3] clip
[4] height | max-height | min-height
[5] width | max-width | min-width
[6] overflow
[7] text-align
 Inline-block
[Features]
[1] when no width is set, the content is opened
[2] A non-exclusive row
[3] Support for width and height
[4] code line breaks are parsed into spaces
[Tag]
<audio><button><canvas><embed><iframe><input><keygen><meter><object><progress><select><textarea><video>
[Unsupported style]
[1] clear
[2] text-align
 None
[Features]
Hide elements and exit document flow
[Tag]
<base><link><meta><title><datalist><dialog><param><script><source><style>
 List-item
[Features]
[1] when no width is set, the width is full
[2] exclusive row
[3] Support for width and height
 Run-in
Run-in is an interesting combination of block/row elements, which can make some block-level elements into the row part of the next element. If an element generates a run-in box and the box is followed by a block-level box, the run-in element becomes a row-level box at the beginning of the block-level box, the run-in box is formatted as the line box in another element, but they still inherit attributes 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.
<span style="display:run-in">run-in test</span><span>paragraph</span>Table 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 one display type of table elements, <thead> <tbody> <tfoot> <tr> <col> <colgroup> because the margin and padding cannot be set, the following describes the display attributes of the <table>, <td>, <th>, and <caption> labels.
 Table
[Features]
[1] when no width is set, the width is opened by the content
[2] exclusive row
[3] Support for width and height
[4] table features are available by default. You can set table-layout, border-collapse, border-spacing, and other table-specific attributes.
 Inline-table
[Features]
[1] when no width is set, the width is opened by the content
[2] A non-exclusive row
[3] Support for width and height
[4] table features are available by default. You can set table-layout, border-collapse, border-spacing, and other table-specific attributes.
 Table-cell
[Features]
[1] when no width is set, the width is opened by the content
[2] A non-exclusive row
[3] Support for width and height
[4] vertical alignment
[5] Same level and height
 Table-caption
[Features]
[1] when no width is set, the width is opened by the content
[2] exclusive row
[3] Support for width and height
 Notes
[1] If an element is an absolute positioning element, the float value is set to none. For floating or absolute positioning elements, the calculated value is determined by the declared value.

[2] for the root element, if it is declared as an inline-table or table, the calculated value table will be obtained. If it is declared as none, the same calculation value none will be obtained, all other display values are calculated as blocks.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More