div 和 span 是 HTML 中两种非常常见的元素，但它们在页面布局和结构中的行为有所不同。它们分别是块级元素和行内元素，每种类型有各自的特点和用途。
1. div标签
- 块级元素 (Block-level element)
- 默认样式：display: block
- 特点：
- 它会占据父容器的整个宽度，默认情况下会从新的一行开始。
- 具有完整的盒子模型属性，可以设置 width, height, margin, padding 等。
- 通常用于定义页面中的大块结构或容器，承载其他内容。
- 块级元素内可以包含其他块级元素或行内元素。
- 用法示例：
<div style="background-color: lightblue;">这是一个块级元素，它会占据整行的宽度。
</div>
- 常见用途：
- 定义布局中的大块内容，如页面的 header、section、footer。
- 包裹其他元素，如表单、文章、段落等。
2. span 标签
- 行内元素 (Inline-level element)
- 默认样式：display: inline
- 特点：
- 不会占据整个宽度，它只占据内容所需的宽度，不会从新的一行开始。
- 行内元素不能包含块级元素，但可以包含其他行内元素。
- span 元素的主要作用是包裹和样式化一小段文本或行内内容。
- 虽然它是行内元素，但仍可以通过 CSS 修改为块级显示（display: block 或 inline-block）。
- 用法示例：
<p>这是一个段落，其中有一部分是 <span style="color: red;">红色文本</span>。</p>
- 常见用途：
用于对文本内容的某个部分添加样式，如改变颜色、字体、背景等。
在不影响布局的情况下，对行内的部分内容进行额外处理或包装。
3. 区别对照表
| 特点 | div | span |
|---|---|---|
| 元素类型 | 块级元素 | 行内元素 |
| 默认行为 | 占据父容器的整个宽度，并从新的一行开始 | 只占据内容所需宽度，不会从新的一行开始 |
| 布局作用 | 用于大块布局或容器，结构化页面 | 用于小部分文本或行内内容的样式化或包裹 |
| 容纳的内容 | 可以包含其他块级元素或行内元素 | 只能包含行内元素 |
| 常见用法 | 用作网页布局的容器 | 用作文本的局部样式化（如加颜色，粗体等） |
4. 总结：
div：用于创建大块内容的布局或容器，适合组织页面结构。
span：用于在行内对小部分内容进行样式处理或包裹，不改变布局。