CSS 元素显示模式

元素显示模式，是指元素以什么方式进行显示，比如 <div> 独占一行，而一行可以放多个<span>.

HTML 的标签有很多，根据元素显示模式，一般分为块元素和行内元素两种。

1、块元素

常见的块元素有：<h1> ~ <h6>、<p>、<div>、<ul>、<ol>、<li>等，特点为：

• 霸道，独占一行
• 高度、宽度、外边距及内边距可以控制
• 宽度默认是父级宽度的 100%
• 是一个容器及盒子，里面可以放行内元素或块元素

注意：文字类的元素内不能使用块级元素，比如 <p> 标签中不能放 <div>

2、行内元素

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<span> 等，特点为：

• 相邻的行内元素在同一行上，一行可以显示多个
• 高度、宽度直接设置是无效的
• 默认宽度为元素本身内容的宽度
• 行内元素里面只能包含文本或者其他行内元素

注意：<a> 标签里面不能再放 <a> 标签，特殊情况 <a> 里面可以放块级元素

3、行内块元素

在行内元素中有几个特殊的标签：<img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点，有人称之为行内块元素，特点是：

• 和相邻的行内元素在同一行上，但是它们之间会有空白缝隙，一行可以显示多个（行内元素特点）
• 默认宽度就是它们本身内容的宽度（行内元素特点）
• 高度、宽度、外边距及内边距可以控制（块元素特点）

4、元素显示模式转换

特殊情况下，我们需要对元素模式进行转换

/*转换为块元素*/
display: block;
/*转换为行内元素*/
display: inline;
/*转换为行内块元素*/
display: inline-block;