Inline element, block element, inline block element

Inline elements 、 A block element 、 Inline block element

One 、 Inline elements

characteristic ：

1. adjacent Inline elements in On one line , a line Sure Show multiple

2. high 、 wide 、 Set up directly yes Invalid Of

3. Default width Namely Its own content Of Width

4. Inline elements Only text can be accommodated or Other inline elements

notes ： Under special circumstances < a> Inside can Block level elements , to < a> It is safest to convert to block level elements

Common in line elements ：< a> < strong> < b> < em> < i> < del> < s> < ins> < u> < span> etc.

Two 、 A block element

characteristic ：

1. own Monopolize one line

2. Height 、 Width 、 Both the outer margin and the inner margin Can be controlled

3. The default width is Containers （ Parent element ） Width 100%

4. It's a container and a box , Inside Sure Release inner or block elements

notes ： A block level element cannot be placed inside an element of a text class , Such as < p> It is mainly used for putting text , Therefore, block level elements cannot be placed , especially < div>

Common block level elements ：< div> < p> < ul> < li> < h1>···< h6>

3、 ... and 、 Inline block element

characteristic ：

1. And the adjacent line elements （ Inline block element ） On one line . But between them There will be gaps . One line can display multiple （ In line element features ）

2. The default width is the width of its own content （ In line element features ）

3. Height , Row height , Both the outer and inner margins can be controlled （ Block level element features ）

Common inline block elements ：< img/> < input> < td>

Four 、 Element display display transformation

Convert to block element ：display: block;

Convert to inline elements ：display: inline;

Convert to inline block elements ：display: inline-block;