这是我参与8月更文挑战的第26天，活动详情查看：8月更文挑战
什么是元素显示模式
在了解元素显示模式前，我们先来举个不恰当的例子：比如在世界上的人有成万上亿，那么归根结底只有两种人就是男人和女人，偶尔还有可能有第三种人-人妖。无论是男人还是女人甚至人妖，虽然都是人但是不同的人也有着不同的特点或者说不同的分工。
其实在HTML中也跟我们人类相似，html中同样也有多种多样的元素标签，但归根结底可以分为两大类：块元素和行内元素。而不同的元素又有着不同的特点和作用，了解了它们的特点我们就可以很好的对网页进行布局。
谈到了网页的布局其实就涉及到了元素的显示模式。html中有那么多元素并且在一般情况下又分为了块元素和行内元素，而这些元素在网页中的显示方式就是元素的显示模式。比如div要自己独占一行，而span在同一行中就可以放置多个。
上面说HTML元素分为块元素和行内元素，那么哪些是块元素哪些是行内元素，它们又有什么特点呢，接下来我们逐一分析：
块元素（男人）
常用的块元素有h1~h6、p、div、ol、ul、li等，其中div是最典型的块元素
块元素的特点：
- 比较霸道，独占一行
- 可以设置宽度、高度、内边距和外边距
- 宽度默认是容器（父级元素宽度）的100%
- 是一个容器及盒子，里面可以放行内或块级元素
注意点：
- 文字类的元素内不同放块级元素，如h系列、p等
- p标签主要用于存放文字，因此里面不能放块级元素，尤其是div
行内元素（女人）
常见的行内元素又a、i、strong、b、em、ins、del、s、u、span等，其中span标签时最典型的行内元素，有的地方也称为内联元素。
行内元素特点：
- 相邻行内元素在同一行上，一行可以显示多个
- 宽和高直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其它行内元素
注意点：
- 链接里不能再放链接a
- 但是链接中可以放置块级元素，但是给a转换成块级模式会更安全（后面讲转换）
行内块元素（人妖）
本来在HTML元素中分为两大类行内和块级元素，但是在行内元素中有几个特殊的标签，img、input、td，它们同时具有块元素和行内元素的特点，我们称它们为行内块元素。
行内块元素特点：
- 和相邻行内元素（行内块）在同一行上，但是它们之间会有间隙，一行可以显示多个（行内元素特点）
- 默认宽度就是它本身内容的宽度（行内元素）
- 宽度、高度、行高和边距可以设置（块级元素特点）
元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度和高度 | 容器宽度的100% | 容器类可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度（需转换） | 本身内容的宽度 | 容纳文本或其它行内元素 |
| 行内块元素 | 一行可以放多个行内块元素 | 可以设置宽高 | 本身内容宽度 |
元素显示模式转换
特殊情况下，我们需要元素模式的转换，简单来说，一个模式的元素需要另外一种模式的特性，这时就需要元素转换。
比如想要设置行内元素a的宽度和高度，就需要将a转换为块元素，这样就可以设置宽和高了。
display：在css中用display就可以实现元素模式的互相转换，从而使元素的一种模式具有另一种模式的特点
- block 转换为块元素
- inline 转换为行内元素
- inline-block 转换为行内块元素
