1.块级元素
![](https://i-blog.csdnimg.cn/blog_migrate/e13e3062a479068a17e17ca31ee9266d.png)
2.行内元素
![](https://i-blog.csdnimg.cn/blog_migrate/177b964a355469610627b30432cfca47.png)
3.块级元素与行内元素的区别
(1)块级元素会独占一行,其宽度自动填满其父元素宽度;
行内元素不会独占一行,相邻的行内元素会排列在同一行,直至一行排不下才会换行,其宽度随元素的内容而变化。
(2)块级元素可以包含行内元素和块级元素;行内元素不能包含块级元素。
(3)行内元素设置width、height、margin-top、margin-bottom、padding-top、padding-bottom无效。
4.
块级元素与行内元素的转换
display:inline-block;
display:inline;
display:block;
5.可变元素
![](https://i-blog.csdnimg.cn/blog_migrate/c8f9b9b7e5e3d51cf6ef83cd3a5fc74e.png)