HTML 之 ＜div＞ 和 ＜span＞

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：用于在行内对小部分内容进行样式处理或包裹，不改变布局。