标签分类

标签按类型划分：

块级元素block：div、p、ul、li、h1~h6…
特性：
1、独占一行
2、支持css的所有样式
3、不写宽的时候，跟父元素的宽相同
4、所占区域是一个矩形

行内元素inline：span、a、em、strong、img(特殊，设置宽高有效)…
特性：
1、挨在一起，不是独占一行
2、有些css样式不支持
3、不写宽的时候（写也无效），由内容决定（img除外）
4、所占区域不一定是矩形
5、内联标签之间会有空隙，原因：换行产生的

行内块元素inline-block：input、select…
特性：
1、挨在一起，但是支持宽高
2、是否支持所有css样式（待补充）
3、不写宽高时，默认为160px宽，16px高
4、所占区域是一个矩形
5、行内块标签之间会有空隙，原因：换行产生的

除了按类型划分，还有按内容和按显示划分

===================block标签特性：TOP↑

1、独占一行

2、支持css的所有样式（例如：background、margin、padding…）

3、不写宽的时候，跟父元素的宽相同

4、所占区域是一个矩形

===================inline标签特性：TOP↑

1、挨在一起，不是独占一行

2、有些css样式不支持（例如：width、height、margin、padding…）

但是margin、padding并非全都不支持，参考如下：
https://blog.csdn.net/qq_37621289/article/details/82859024

3、不写宽的时候（写也无效），由内容决定（img除外）

4、所占区域不一定是矩形

可以发现当页面宽度很小时，形状是这样的

5、内联标签之间会有空隙，原因：换行产生的

写在一行时，是没有空隙的

注：这个问题其实不用解决，因为布局一般使用的是块标签，内联标签一般是用来修饰文本的。
如果你不想写在一行，非要解决这个问题，可以把父元素的font-size设为0，空隙就消失了。

===================inline-block标签特性：TOP↑

1、挨在一起，但是支持宽高

2、是否支持所有css样式（待补充）

3、不写宽高时，默认为160px宽，16px高

4、所占区域是一个矩形（当页面宽度足够小时，会被挤到下一行）

5、行内块标签之间会有空隙，原因：换行产生的             TOP↑