在 HTML 中，元素根据其在页面布局中的表现行为主要分为行内元素、块级元素和空元素。理解它们的区别对于掌握 CSS 布局至关重要。
一、行内元素 (Inline Elements)
特点：
- 不独占一行：多个行内元素可以在同一行内依次排列（直到该行空间不足才换行）。
- 宽度和高度：无法直接设置
width和height（除非将其display改为inline-block或block）。 - 垂直方向的
margin和padding：margin-top/margin-bottom通常无效或表现异常（不会影响其他元素的布局），但padding-top/padding-bottom会显示背景，但不影响布局。 - 水平方向的
margin和padding：有效。 - 内容决定尺寸：其宽度和高度由其内容（文本、图片等）决定。
- 不能包含块级元素：通常只能包含文本或其他行内元素。
常见行内元素示例：
<span>：通用的行内容器，无语义。<a>：超链接。<strong>：重要性强调（语义化粗体）。<em>：语气强调（语义化斜体）。<b>：粗体（仅外观，无强调语义）。<i>：斜体（仅外观，如外文、书名）。<u>：下划线。<s>/<del>：删除线。<small>：小号文本。<mark>：高亮文本。<img>：图像（虽然是行内元素，但表现类似inline-block，可设置宽高）。<br>：换行（严格来说是空元素，但常用于行内）。<code>：代码片段。<sub>/<sup>：下标/上标。<q>：短引用。<cite>：作品标题引用。
二、块级元素 (Block-level Elements)
特点：
- 独占一行：每个块级元素都会从新的一行开始，并且其后的元素也必须从新的一行开始。
- 宽度和高度：可以设置
width和height。 margin和padding：所有方向的margin和padding都有效，并且会影响布局。- 默认宽度：在未设置宽度时，默认占据其父元素的整个宽度。
- 可以包含：可以包含其他块级元素、行内元素以及文本。
常见块级元素示例：
<div>：通用的块级容器，无语义。<p>：段落。<h1>到<h6>：标题。<ul>/<ol>/<li>：无序列表、有序列表、列表项。<dl>/<dt>/<dd>：定义列表、定义术语、定义描述。<section>：文档中的节或区域。<article>：独立的文章内容。<aside>：侧边栏或与内容相关但可独立的部分。<nav>：导航链接。<header>：页眉。<footer>：页脚。<main>：页面主要内容。<figure>/<figcaption>：图文组合及其标题。<form>：表单。<table>：表格。<hr>：主题分隔线。<pre>：预格式化文本。<blockquote>：长引用。
注意：
<li>元素比较特殊，它既是块级元素（默认独占一行），又可以包含块级和行内元素。
三、空元素 (Void Elements)
特点：
- 没有内容：不能包含任何子元素或文本内容。
- 没有结束标签：在 HTML5 中，空元素是自闭合的，不需要写结束标签（如
<br>而不是<br></br>）。虽然在 XHTML 中要求写成<br />，但在 HTML5 中/是可选的。 - 行内或块级：空元素本身也有行内或块级的分类。
常见空元素示例：
<br>：插入一个换行符（行内元素）。<hr>：插入一条水平分隔线（块级元素）。<img>：嵌入图像（行内元素，但可设宽高）。<input>：输入控件（行内元素）。<meta>：元数据（位于<head>中）。<link>：链接外部资源（如 CSS）（位于<head>中）。<source>：为<picture>、<audio>、<video>提供媒体资源。<track>：为<audio>或<video>提供文本轨道（如字幕）。<embed>：嵌入外部内容（如插件）。<area>：图像映射中的可点击区域。<base>：为页面上的所有链接规定默认地址或默认目标（位于<head>中）。<col>：定义表格列的属性（通常与<colgroup>一起使用）。<keygen>：（已废弃）生成密钥对。<param>：为<object>元素定义参数。
总结对比
| 特性 | 行内元素 (Inline) | 块级元素 (Block-level) | 空元素 (Void) |
|---|---|---|---|
| 是否独占一行 | 否 | 是 | 取决于具体元素（如 <br> 是行内，<hr> 是块级） |
| 能否设置宽高 | 默认不能（需改 display） | 能 | 能（如果该元素支持，如 <img>, <input>） |
margin/padding | 垂直方向通常无效，水平方向有效 | 所有方向都有效 | 取决于具体元素 |
| 默认宽度 | 由内容决定 | 占据父元素 100% 宽度 | 由内容或属性决定 |
| 能否包含块级元素 | 不能 | 能 | 不能（本身无内容） |
| 是否有结束标签 | 有（除空元素外） | 有（除空元素外） | 无（自闭合） |
| 典型代表 | <span>, <a>, <strong>, <em> | <div>, <p>, <h1>, <ul>, <li> | <br>, <hr>, <img>, <input>, <meta> |
重要提示：通过 CSS 的 display 属性，可以改变元素的显示类型：
display: block;可以将行内元素变为块级。display: inline;可以将块级元素变为行内。display: inline-block;可以创建一个既有行内特性（不独占一行）又有块级特性（可设宽高）的元素。
THE END
