# 校园活动网站——盒模型与页面分区 教学设计
| **课题** | **校园活动网站——盒模型与页面分区** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解内容区、内边距、边框和外边距组成的 CSS 盒模型，掌握宽度、间距、边框及 `box-sizing` 的作用。
**技能目标**：能够使用盒模型调整校园活动网站的页头、公告区和内容区尺寸与间距，解决元素拥挤和宽度溢出问题。
**素养目标**：培养用开发者工具测量和调试界面的习惯，形成以数据而非反复猜测调整布局的工程意识。 |
| **教学重难点** | **重点**：盒模型四层结构；`padding` 与 `margin` 的区别；边框和宽度设置。
**难点**：理解默认盒模型下实际占用宽度的计算，正确使用 `box-sizing: border-box` 控制尺寸。 |
| **教学资源准备** | 上节课项目、盒模型实体图、宽度计算练习卡、问题页面、浏览器开发者工具。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 布局问题导入**
（5分钟） | 观察文字贴边、区域拥挤和横向溢出，提出页面分区优化任务。 | **问题呈现**
展示三个典型问题，提问：“为什么设置了宽度，元素仍超出容器？”
**任务明确**
要求本课完成页头、公告区和主体容器的间距设计。 | **现象描述**
指出各区域在尺寸和间距上的问题。
**原因猜测**
根据已有经验判断可能与边框、内外间距有关。 | 从可见问题引出盒模型，让抽象尺寸概念服务于具体页面优化。 |
| **2. 盒模型探究**
（10分钟） | 学习 content、padding、border、margin 的位置和用途。 | **模型讲解**
用“礼盒”类比四层结构，在开发者工具中高亮元素并展示颜色区域。
**概念对比**
比较 `padding` 增加内部留白与 `margin` 拉开元素距离的效果。 | **模型标注**
在盒模型图中填写四层名称和作用。
**参数实验**
分别修改内外边距，观察文字和相邻元素的位置变化。 | 通过开发者工具可视化尺寸关系，避免把两个间距属性混用。 |
| **3. 宽度计算示范**
（8分钟） | 理解标准盒模型占用宽度和 `border-box` 规则。 | **计算演示**
计算 `width: 300px` 加左右内边距和边框后的实际宽度，说明溢出原因。
**方案示范**
设置 `box-sizing: border-box`，观察总宽度保持不变。 | **计算练习**
完成两道实际宽度计算并核对工具显示值。
**代码验证**
切换盒模型规则，记录元素宽度变化。 | 将计算结果与浏览器测量对应，建立可验证的尺寸判断能力。 |
| **4. 页面分区实践**
（13分钟） | 优化页头、公告区和主体容器，建立统一的间距规则。 | **任务发布**
要求设置全局 `border-box`、主体最大宽度、居中外边距、区域内边距和公告边框。
**巡回指导**
引导使用计算样式和盒模型面板定位溢出、间距叠加等问题。 | **样式调整**
按验收图完成三个区域的尺寸、边框和间距设置。
**工具测量**
选择元素查看实际宽高，修复横向滚动和贴边问题。 | 在完整页面中综合使用盒模型，以工具测量替代盲目修改数值。 |
| **5. 展示总结评价**
（4分钟） | 比较优化前后页面，归纳尺寸与间距调试方法。 | **前后对比**
展示典型作品，说明统一间距如何提升秩序感。
**方法总结**
归纳“选元素—看盒模型—算尺寸—改属性—再验证”。 | **结果说明**
指出自己修复的一个布局问题及所用属性。
**规范自查**
检查是否存在随意叠加的重复间距。 | 将实践经验形成调试流程，增强对布局问题的分析能力。 |
## 板书设计
```text
盒模型（由内到外）
content → padding → border → margin
标准盒模型：
实际宽度 = width + 左右padding + 左右border
推荐：
* { box-sizing: border-box; }
调试：选择元素 → 查看盒模型 → 测量 → 修改
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够区分内边距和外边距，使用盒模型优化页面分区。通过计算与开发者工具测量，多数学生成功解决了宽度溢出和内容贴边问题。 |
| **教学反思** | 盒模型计算对部分学生仍较抽象，单纯公式讲解效果有限。应保持“纸面计算—浏览器测量—切换规则”的三步验证，并限制同一环节引入过多尺寸单位。 |