Display:inline, block, Inline-block, and other properties of display

Display:block is the display of elements as block-level elements.

The block element is characterized by:
Always start on a new line;
Height, row height and top and bottom margin can be controlled;
The width defaults to 100% of its container unless a width is set
<div>, <p>,

Nline and blocks can control an element's high row width characteristics, which need to be toggled as follows:

Let an inline element start from the new line;
Keep The block elements and other elements on one line;
Controls the width of the inline element (especially useful for navigation bars);
Controls the height of the inline element;
You can set the background color of a block element to the same width as the text without having to set a width.

Display:inline-block objects are presented as inline objects, but the contents of the objects are presented as block objects. Adjacent inline objects are presented in the same line, allowing spaces.

Elements of the Inline-block feature:

Renders an object as an inline object, but the contents of the object are presented as block objects. Adjacent inline objects are presented in the same line, allowing spaces. (accurately, the elements that apply this attribute are rendered as inline objects, the surrounding elements remain on the same line, but you can set the properties of the width and height parcel elements)

Not all browsers support this property, currently supported browsers are: Opera, safari in IE the use of inline elements Display:inline-block,ie is not known, but using display: Inline-block in IE will trigger layout, so that inline elements have the Display:inline-block attribute of the table disease. From the above analysis, it is not difficult to understand why ie, the block element set Display:inline-block property can not achieve inline-block effect. At this point the block element is simply triggered by the display:inline-block layout, and it is the row layouts, so after the trigger, the block element is still the row layout, but not as the block elements in opera as an inline object.

How does the IE block element realize the Display:inline-block effect?

There are two ways of doing this:
1, first use the Display:inline-block property to trigger the block element, and then define the Display:inline, so that the block elements presented as inline objects (two display to be placed in two CSS declarations to have effect, this is a classic IE bug, If Display:inline-block is defined first, then the display is set back to inline or block,layout does not disappear). The code is as follows (...). Other attribute content omitted):

div {display:inline-block; ...}
div {display:inline;}

2. Set the block element directly to inline object presentation (set property display:inline), then trigger the layout of the block element (e.g. zoom:1, etc.). The code is as follows:

div {display:inline; zoom:1; ...}

In the layout of the page, the visibility of the properties of display can be more reasonable to layout.

The following properties are commonly used by individuals Display:none | | Block | | inline | | Inline-block, but it has a lot of other properties, so let's take a look at it.

• If display is set to none,float and the position attribute definition will not take effect;

• If the position is neither static nor relative or float is either none or the element is the root element, when display:inline-table, the display's computed value is table; when Display:inline | Inline-block | Run-in | When the table-* is in the system, display calculates the block, and the other case is the specified value;

• The ie6,7 supports the conversion of inline elements to inline-block, but does not support the conversion of block elements to inline-block, so non-inline elements are converted to Inline-block under ie6,7, and must first be converted to inline, The haslayout is then triggered to obtain and inline-block a similar effect; you can do this:

• Fully-compatible Inline-block:

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

All values for display:

None

hides the object. Unlike the hidden value of the visibility property, it does not retain its physical space for objects that are hidden

Inline

Specifies that the object is an inline element.

Block

Specifies that the object is a block element.

List-item:

Specifies that the object is a list item.

Inline-block:

Specifies that the object is an inline block element. (CSS2)

Table

specifies the object as a table at the block element level. Similar to HTML tags <table> (CSS2)

Inline-table:

specifies the object as an inline element-level table. Similar to HTML tags <table> (CSS2)

Table-caption:

specifies the object as the table caption. Similar to HTML tags <caption> (CSS2)

Table-cell:

specifies the object as a table cell. Similar to HTML tags <td> (CSS2)

Table-row:

specifies the object as a table row. Similar to HTML tags <tr> (CSS2)

Table-row-group:

specifies the object as a table row group. Similar to HTML tags <tbody> (CSS2)

Table-column:

specifies the object as a table column. Similar to HTML tags <col> (CSS2)

Table-column-group:

Specifies that the object is displayed as a table column group. Similar to HTML tags <colgroup> (CSS2)

Table-header-group:

specifies the object as a table header group. Similar to HTML tags <thead> (CSS2)

Table-footer-group:

specifies the object as the table footer group. Similar to HTML tags <tfoot> (CSS2)

Run-in:

determines whether an object is an inline object or a block-level object, depending on the context. (CSS3)

Box

displays the object as an elastic telescopic box. (the oldest version of the Telescopic box) (CSS3)

Inline-box:

the object is displayed as an inline block-level elastic expansion box. (the oldest version of the Telescopic box) (CSS3)

Flexbox

displays the object as an elastic telescopic box. (Telescopic box transition version) (CSS3)

Inline-flexbox:

the object is displayed as an inline block-level elastic expansion box. (Telescopic box transition version) (CSS3)

Flex:

displays the object as an elastic telescopic box. (Latest version of Telescopic box) (CSS3)

Inline-flex:

the object is displayed as an inline block-level elastic expansion box. (Latest version of Telescopic box) (CSS3)

Display:inline, block, Inline-block, and other properties of display