Block level elements and inline elements
<!-- more -->
The information involved in this article comes from Internet arrangement and personal summary , It means personal learning and experience gathering , If there is any infringement , Please contact me to delete , thank you ！
The difference between inline and block level elements ：
Inline elements ：
- Side by side with other in line elements
- Width and height cannot be set , The default width is the width of the text
Block-level elements ：
- Occupy a business , It can't be juxtaposed with any other element .
- Can accept width and height , If the width is not set , Then the width will default to the parent 100%.
Classification of block level elements and in line elements ：
stay HTML In terms of , The label is divided into ：
Text level label ：p , span , a , b , i , u , em
Container level label ：div , h series , li , dt ,dd
p： It can only contain text and pictures and form elements ,p You can't put... In it h and ul, You can't put p.
from CSS The perspective of ,CSS It's very similar to the above classification , Just p Dissimilarity ：
Inline elements ： except p outside , All the text level tags , It's all in-line elements .p It's a text level label , But it's a block level element .
Block-level elements ： All container level labels , It's all block level elements , as well as p label .
The transformation between block level elements and in line elements ：
adopt display Attribute will block level elements ( such as div) And the elements in the line .
Then the tag will become an in line element , namely ：
1, At this point div Width and height will no longer be set .
2, At this point div It can be placed side by side with other in line elements .
use display Put the in line elements ( such as span) Turn into block level elements .
So this span Tags will become block level tags , namely ：
1, At this point span Can set width , Height .
2, At this point span One row must be exclusive , Other elements can't go side by side with it .
3, If the width is not set , Will occupy the parent .
The omnipotent network