HTML基础教程（二十一）区块＜div＞ 和＜span＞：＜div＞与＜span＞，网页布局的“乐高积木”与“灵魂画手”！

引言：从“毛坯房”到“精装房”的魔法

想象一下，你拿到一间空荡荡的毛坯房——四面白墙，空空如也。如何把它变成功能分区清晰、装饰精美的梦想之家？在HTML的世界里，<div>和<span>就是你的“施工团队”和“软装设计师”！一个负责砸墙砌砖、划分客厅卧室（宏观布局），另一个负责给窗帘挑颜色、给壁画选位置（微观修饰）。别看它们俩标签简单，却是网页开发中使用频率最高的元素，堪称“标签界的劳模”！

但你知道吗？许多初学者常把这两位大佬混为一谈，结果网页布局要么垮得像积木乱堆，要么样式错乱得像抽象画。今天，我们就来一场深度解剖，看看<div>和<span>究竟有何不同，如何协作，以及如何用它们玩出花样！

---

一、宏观巨人：<div>——网页的“乐高积木”

1. 什么是<div>？

<div>（Division的缩写）是HTML中的块级元素（block-level element）。它就像一个透明的集装箱，本身没有视觉特征，但可以包裹其他内容（文本、图片、表单等），并通过CSS赋予样式、定位和布局。

关键特性：

• 独占一行：默认情况下，每个<div>都会从新行开始，占据父容器的全部宽度。
• 布局核心：常用于构建网页的宏观结构，如页眉、导航栏、内容区、侧边栏、页脚等。
• 容器属性：可设置宽度、高度、边距、背景等，完美适配CSS盒模型。

2. 为什么说它是“乐高积木”？

就像乐高积木可以通过组合搭建出城堡或飞船，<div>通过嵌套和排列，能构造出任何网页布局！例如：

<div class="header">我是页眉</div>
<div class="main">
  <div class="sidebar">我是侧边栏</div>
  <div class="content">我是主要内容</div>
</div>
<div class="footer">我是页脚</div>

通过CSS为这些<div>设置样式，一个清晰的网页