元素显示模式分类

块元素：一般指该元素自身独占一行，如div标签、p标签、ul标签、li标签等。

特点：

自身独占一行。

默认宽度为父级宽度的100%。

高、宽度、外边距以及内边距都可以自行设置。

是一个容器，也是一个盒子，可以容纳块元素或者行内元素。

注：p标签和标题标签中不可加入块级元素。

行内元素：一般指多个元素共用一行，如a标签、span标签等。

特点：

相邻行内元素在一行上，一行可以显示多个。

默认宽度是元素自身内容的宽度。

高、宽直接设置是无效的。

行内元素只能容纳文本或其他行内元素。

注：链接a标签中可以放块级元素。建议先将行内元素转为块级模式最安全。

行内块元素：一般是指该元素同时具有块元素和行内元素的特点，如img标签、input标签等。

特点：

和相邻行内块元素在一行上，以空白缝隙间隔，一行可以显示多个。

默认宽度就是其自身内容的宽度。

高度、行高、外边距以及内边距都可以控制。

总结：

元素显示模式转换

将元素转换为块级元素：

display：block；

将元素转换为行内元素：

display：inline；

将元素转换为行内块元素：

display：inline-block；