盒模型

课堂笔记

一、唯二的无语义标签

标签	特点	典型用途
<div>	块级元素，独占一行	布局容器、分区划分
<span>	行内元素，不换行	文本局部修饰、微小区域控制

核心作用：它们本身没有任何视觉或结构上的特殊含义，纯粹作为 CSS 样式的挂钩 使用。

二、盒模型的四层结构（从外到内）

1. Margin（外边距）：控制元素与元素之间的距离，背景透明。
2. Border（边框）：元素的边界线。
3. Padding（内边距）：内容与边框之间的填充区域。
4. Content（内容）：显示文字或图片的实际区域。

三、方向与缩写规律

1. 四个方向（顺时针记忆法）

• Top（上） → Right（右） → Bottom（下） → Left（左）

2. 属性值写法（适用于 margin、padding、border-width）

值个数	对应方向	记忆口诀
1个值	上、右、下、左 全相同	四边一致
2个值	第1个：上下 / 第2个：左右	上下、左右
3个值	第1个：上 / 第2个：左右 / 第3个：下	上、左右、下
4个值	上、右、下、左（严格顺时针）	顺时针对应

四、背景颜色的渲染范围（重要纠正）

• 覆盖区域：background-color 默认会延伸到 Border（边框） 区域之下（即在边框内部依然可见背景色），但不会应用到 Margin（外边距） 区域。

• 通俗理解：背景色会填满 边框以内的所有范围（Content + Padding + Border）。