块元素、行内元素和行内块元素的区别以及转换

块元素（block）

可以设置其宽度、高度，内外边距，独占一行

默认宽度为 100% 父级元素的宽度

代码<boody><div></div></body>中块元素div的父元素是body，长度默认为浏览器的宽；

代码<div><p></p></div>中块元素p的父元素是div，长度默认为div的宽；那句话可以理解为（默认状态下，块状元素的宽与父元素的宽相同）。

不受空格影响

可以容纳行内元素和其他块元素

常见的块元素：div，h1~h6，ul，li，p，table等

行内元素（inline-level）

不支持宽高（宽高根据内容大小自动撑开），自左向右排列

受空格影响

默认宽度是自身内容的宽度

不独占一行

常见的行内元素：span，i，a，b，strong，em，sub，sup等

行内块元素（inline-block）

支持宽高，自左向右排列

受空格影响

不独占一行

具备块元素和行内元素的所有特点

标签之间的转换

display：

none（隐藏，不显示）

block（转化为块元素）

inline（转化为行内元素）

inline-block（转化为行内块元素）

注意：当元素浮动（float）后，不再区分行内和块元素，并且具备两者所有特点

另一种分类方法

替换元素和非替换元素

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如：img元素通过src属性的值来读取图片信息并显示出来

来源：

https://blog.csdn.net/zheng_14451/article/details/108187175

https://blog.csdn.net/weixin_44299027/article/details/103876512

https://segmentfault.com/a/1190000000654770

https://www.imooc.com/qadetail/123665

元素两种分类方法

替换元素

替换元素和非替换元素