块级元素、行内元素、行内块元素三种的区别

块级元素、行内元素、行内块元素

块级元素

特点：

• 独占一行
• 可以设置宽高 ，内外边距

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

行级标签

特点：

• 水平排列
• 不能设置宽高，但可以设置内外边距
• 高度height 无效，可以通过line-height来设置。
• 空格和回车会被解析为空格

常见元素：span，a，b，strong，i 等

行内块标签

特点：具备块级和行级元素的特点。

常见元素：img，input， textarea 等

元素之间的转化

通过修改display属性来切换块级元素和行内元素

块 => 行 display：inline

行 => 块 display：block 或者 触发 bfc

转 => 行内快 display：inline-block