HTML中元素的显示模式，块元素，行内元素及行内块元素

这是我参与8月更文挑战的第26天，活动详情查看：8月更文挑战

什么是元素显示模式

在了解元素显示模式前，我们先来举个不恰当的例子：比如在世界上的人有成万上亿，那么归根结底只有两种人就是男人和女人，偶尔还有可能有第三种人-人妖。无论是男人还是女人甚至人妖，虽然都是人但是不同的人也有着不同的特点或者说不同的分工。

其实在HTML中也跟我们人类相似，html中同样也有多种多样的元素标签，但归根结底可以分为两大类：块元素和行内元素。而不同的元素又有着不同的特点和作用，了解了它们的特点我们就可以很好的对网页进行布局。

谈到了网页的布局其实就涉及到了元素的显示模式。html中有那么多元素并且在一般情况下又分为了块元素和行内元素，而这些元素在网页中的显示方式就是元素的显示模式。比如div要自己独占一行，而span在同一行中就可以放置多个。

上面说HTML元素分为块元素和行内元素，那么哪些是块元素哪些是行内元素，它们又有什么特点呢，接下来我们逐一分析：

块元素（男人）

常用的块元素有h1~h6、p、div、ol、ul、li等，其中div是最典型的块元素

块元素的特点：

1. 比较霸道，独占一行
2. 可以设置宽度、高度、内边距和外边距
3. 宽度默认是容器（父级元素宽度）的100%
4. 是一个容器及盒子，里面可以放行内或块级元素

注意点：

• 文字类的元素内不同放块级元素，如h系列、p等
• p标签主要用于存放文字，因此里面不能放块级元素，尤其是div

行内元素（女人）

常见的行内元素又a、i、strong、b、em、ins、del、s、u、span等，其中span标签时最典型的行内元素，有的地方也称为内联元素。

行内元素特点：

1. 相邻行内元素在同一行上，一行可以显示多个
2. 宽和高直接设置是无效的
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或其它行内元素

注意点：

• 链接里不能再放链接a
• 但是链接中可以放置块级元素，但是给a转换成块级模式会更安全（后面讲转换）

行内块元素（人妖）

本来在HTML元素中分为两大类行内和块级元素，但是在行内元素中有几个特殊的标签，img、input、td，它们同时具有块元素和行内元素的特点，我们称它们为行内块元素。

行内块元素特点：

1. 和相邻行内元素（行内块）在同一行上，但是它们之间会有间隙，一行可以显示多个（行内元素特点）
2. 默认宽度就是它本身内容的宽度（行内元素）
3. 宽度、高度、行高和边距可以设置（块级元素特点）

元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度和高度	容器宽度的100%	容器类可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度（需转换）	本身内容的宽度	容纳文本或其它行内元素
行内块元素	一行可以放多个行内块元素	可以设置宽高	本身内容宽度

元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单来说，一个模式的元素需要另外一种模式的特性，这时就需要元素转换。

比如想要设置行内元素a的宽度和高度，就需要将a转换为块元素，这样就可以设置宽和高了。

display：在css中用display就可以实现元素模式的互相转换，从而使元素的一种模式具有另一种模式的特点

• block 转换为块元素
• inline 转换为行内元素
• inline-block 转换为行内块元素