In-depth understanding of CSS display properties

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

block

【feature】

1. When the width is not set, the width is the width of the parent element

2, monopoly party

3. Support width and 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>

Note: The menuitem tag is only supported by firefox

[Unsupported style]

1、vertical-align

inline

【feature】

1. Content expansion width

2, non-exclusive party

3. Width and height are not supported

4. Code line breaks are parsed into spaces

【label】

[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

8、text-indent

9、text-overflow

inline-block

【feature】

1. When the width is not set, the content will expand the width

2, non-exclusive party

3. Support width and height

4. Code line breaks are parsed into spaces

【label】

<audio><button><canvas><embed><iframe><img><input><keygen><meter><object><progress><select><textarea><video>

It should be noted that the inline-block elements mentioned here mean that they have inline-block characteristics, not that their default value is display:inline-block

If the default value is used as a benchmark, only form elements are pure inline-block elements, audio, canvas, iframe, img, keygen, object, and video should all be regarded as inline elements

[Unsupported style]

1、clear

[IE compatible]

IE7-Browser does not support setting inline-block styles for block-level elements. The solution is as follows: first turn it into an inline element, use the characteristics of inline elements, and then trigger haslayout to make it have the characteristics of block-level elements. Can simulate the effect of inline-block

div{
    display:inline-block;
    *display: inline;
    zoom: 1;

none

【feature】

Hide elements and get out of the document flow

【label】

<base><link><meta><title><datalist><dialog><param><script><source><style>

list-item

【feature】

1. When the width is not set, the width will fill one line

2, monopoly party

3. Support width and height

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 several types of display for table elements. <thead><tbody><tfoot><tr><col><colgroup> Because margin and padding cannot be set, it is less used. The following will focus on <table>, <td >, <th>, <caption> the display attributes corresponding to the four tags

table

【feature】

1. When the width is not set, the width is stretched by the content

2, monopoly party

3. Support width and height

4. It has table features by default, and table-specific attributes such as table-layout, border-collapse, border-spacing, etc. can be set

Note: For display as table and inline-table, if you are in a separated border model, border-collapse:separate;, both margin and padding can be set; if you are in a merged border model, border-collapse:collapse, you can only set margin

inline-table

【feature】

1. When the width is not set, the width is stretched by the content

2, non-exclusive party

3. Support width and height

4. It has table features by default, and table-specific attributes such as table-layout, border-collapse, border-spacing, etc. can be set

table-cell

【feature】

1. When the width is not set, the width is stretched by the content

2, non-exclusive party

3. Support width and height

4. Vertical alignment

5. Same level

Note: The display: table-cell element cannot be set margin, but padding can be set

table-caption

【feature】

1. When the width is not set, the width is stretched by the content

2, monopoly party

3. Support width and height

Note: The margin and padding of display:table-caption elements can be set