前言
块元素和行内元素，是HTML中极其重要的概念，同时也是学习css的重要基础知识。这一节的内容， 小伙伴们要重点掌握。
在之前的学习中，小伙伴们可能会发现：在浏览器预览效果，有些元素是独占一行的，元素不能与这个元素位于同行，如p、div、hr等;而有些元素不是独占一-行的， 其他元素与这个元素位于同一行，如strong、 em等。特别注意一下， 这里所谓的“独占-行”，并不HTML代码里独占一行，而是在浏览器显示效果中独占一行。
其中，标签也叫作“元素” ，如p标签又叫p元素。叫法不同，意思相同。这一节使用“行来称呼，也是让大家熟悉这两种叫法。
在HTML中，根据元素的表现形式，一般可以分为两类(暂时不考虑inine-block)
- 块元素（block）
- 行内元素（inline）
块元素
在html中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。一般情况下，块元素内部可以容纳其他块元素和行内元素
| 块元素 | 说明 |
|---|---|
| h1~h6 | 标题元素 |
| p | 段落元素 |
| div | div元素 |
| hr | 水平线 |
| ol | 有序列表 |
| ul | 无序列表 |
举例
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>块元素和行内元素</title>
</head>
<body>
<div>
<h3>块元素和内元素</h3>
<p>“举一个列子”</p>
<strong>块元素</strong>
<em>内元素</em>
</div>
</body>
</html>浏览器预览一下
分析
结论
通过上面的分析图，我们可以得到以下结论
- h3和p是块元素，它们的显示效果是独占一行的，并且排斥任何元素与它们位于同一行。strong和em是行内元素，即使代码不位于同一行，它们的显示效果也是位于同一行的（显示效果与代码是否位于同一行没有任何关系）
- h3、p、strong和em元素都是div元素内部的，也就是说，块元素内部可以容纳其他块元素和行内元素。
由此，我们可以总结出块元素具有以下两个特点
- 块元素独占一行，排斥去他元素（包括块元素和行内元素）与其位于同一行。
- 块元素内部可以容纳其他块元素和行内元素。
行内元素
在HTML中行内元素与块元素恰恰相反，行内元素是可以与其他行内元素位于同一行的，行内元素内部(标签内部)只可以容纳其他行内元素，不可以容纳块元素。
常见的行内元素
| 行内元素 | 说明 |
|---|---|
| strong | 粗体元素 |
| em | 斜体元素 |
| a | 超链接 |
| span | 常用于行内元素，结合css定于样式 |
在学完css之后，建议再回头看一下这一节， 相信大家就会对块元素和行内元素有非常深的了解
对于行内元素效果，可以看块元素的例子，从这个例子中，我们可以总结出行内元元素具有以下两个特点
- 行内元素可以与其他行内元素位于同一行。
- 行内元素内部可以容纳其他行内元素，但不可以容纳块元素。
块元素和行内元素非常复杂，大家在这一节重点理解其概念就行了，不需要去记忆块元素有哪些、行内元素有哪些。
2 comments
用css可以把行内元素设置成块，也可以反过来把块元素设置成行内