Element display mode: block level, inline, inline block, nesting specification, display mode conversion

Chrome In debugging mode, there are Computed You can view the display mode of elements .

1. Block-level elements （ Can be alone ）block

• Monopolize one line

• Width ： Parent element width （ Default ）

• Height ： Open up by content （ Default ）

• Width and height can be set

eg:

hx（x=1~6）,div , p , ul li , dl dt dd , form , header ,  nav ,  footer

2. Inline elements （ Don't do more ）inline

• One line shows more , Don't wrap

• The width is spread by the content

• Width and height cannot be set

• （ horizontal direction ）padding and margin You can set

eg：

a , span ,b , u , i , s , strong , ins , em ,del

3. Inline block element （ Multi line inner block ）inline-block

• More than one in a row ( There is a gap in the middle )

• Width and height can be set

eg：

input , textarea  , button  ,select

img It has the characteristics of inline block elements , however Chrome Is shown as inline

HTML Nested specification ：

Block-level elements ： Big container , Can be nested ： Text , Block level , inline , Inline block element

but p Cannot nest div,p,h

Inline elements ： Can be nested ： Text , Inline elements

a Any element can be nested inside the label , Except myself

Element display mode conversion

block -> inline ：display: inline;

inline -> block ：display：block;   ( Commonly used )

block , Inline elements -> Block in row ：display：inline-block;   ( Commonly used )