Block level element block inline element inline inline block level element inline block and mutual conversion

Inline elements ： Generally, it is the container of content , Block-level elements ： Generally, it is the container of other containers
Block level elements can include block level elements and inline elements .
Inline elements are suitable for displaying specific content , Block level elements are suitable for layout ,CSS+DIV Layout , Now the mobile terminal layout is recommended Flex Layout , Because the elastic layout is pc There is a problem with the end compatibility for the time being , future pc End also can FLex Layout , This is the trend

Block-level elements ： Monopolize one line , Width and height 、margin、padding take effect , If the width is not set , The default is the width of the browser
Inline elements ： You can have multiple tags on one line , It does not take effect for width and height attributes , It's all about content ., Only right margin,padding It will come into effect .
Inline block level elements ： Combine the advantages of inline elements and block level elements , Both width and height can be set , It can make padding、margin take effect , It can also be inline with other elements side by side

1、float： When setting the inline element to float , Of the inline element display Attributes will be assigned block value , And has floating characteristics ,
Some materials say . Inline elements remove the inexplicable blank between , But my test did not .

2、position： When positioning inline elements ,absolute and fixed Will change the original inline element into a block level element .