块元素和行内元素，是HTML中极其重要的概念，同时也是学习CSS的重要基础知识。对于这一节的内容，小伙伴们要重点掌握，千万不要跳过了。
在之前的学习中，小伙伴可能会发现：在浏览器预览效果，有些元素是独占一行的，其他元素不能跟这个元素位于同一行，如p、div、hr等。而有些元素不是独占一行的，其他元素可以跟这个元素位于同一行，如strong、em等。特别注意一下，这里所谓的“独占一行”，并不是在HTML代码里独占一行，而是在浏览器显示效果中独占一行。
注：标签，也叫“元素”，例如p标签又叫p元素。叫法不同，意思相同。这一节使用“元素”来称呼，也是让大家熟悉这两种叫法。
在HTML中，根据元素的表现形式，一般可以分为两类（暂时不考虑inline-block）。
- （1）块元素（block）
- （2）行内元素（inline）
一、块元素
在HTML中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。
| 块元素 | 说明 |
|---|---|
| h1~h6 | 标题元素 |
| p | 段落元素 |
| div | div元素 |
| hr | 水平线 |
| ol | 有序列表 |
| ul | 无序列表 |
上表列举的是HTML入门阶段常见的块元素，而并不是全部。光说不练假把式，咱们还是先来看一个例子。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>块元素和行内元素</title>
</head>
<body>
<div>
<h3>绿叶学习网</h3>
<p>“绿叶，给你初恋般的感觉。”</p>
<strong>绿叶学习网</strong>
<em>“绿叶，给你初恋般的感觉。”</em>
</div>
</body>
</html>
浏览器预览效果如下图所示：
分析：
上面为每一个元素加入虚线框来分析它们的结构，从中我们可以很容易得出以下结论。
- （1）h3和p是块元素，它们的显示效果都是独占一行的，并且排斥任何元素跟它们位于同一行； strong和em是行内元素，即使代码不是位于同一行，它们的显示效果也是位于同一行的（显示效果跟你代码是否位于同一行没有关系）。
- （2）h3、p、strong和em元素都是在div元素内部的，也就是说，块元素内部可以容纳其他块元素和行内元素。
由此，我们可以总结出块元素具有以下两个特点。
- （1）块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行。
- （2）块元素内部可以容纳其他块元素和行内元素。
二、行内元素
在HTML中，行内元素跟块元素恰恰相反，行内元素是可以与其他行内元素位于同一行的。此外，行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。
| 行内元素 | 说明 |
|---|---|
| strong | 粗体元素 |
| em | 斜体元素 |
| a | 超链接 |
| span | 常用行内元素，结合CSS定义样式 |
对于行内元素效果，可以看块元素的例子，从这个例子我们可以总结出行内元素具有以下两个特点。
- （1）行内元素可以与其他行内元素位于同一行。
- （2）行内元素内部可以容纳其他行内元素，但不可以容纳块元素。
块元素和行内元素非常复杂，大家在这一节重点理解其概念就行了，而不需要去记忆块元素有哪些、行内元素有哪些。
