teaching-design/data/Web/8.md

校园活动网站——盒模型与页面分区 教学设计

课题	校园活动网站——盒模型与页面分区
课时	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分钟）	比较优化前后页面，归纳尺寸与间距调试方法。	前后对比 展示典型作品，说明统一间距如何提升秩序感。 方法总结 归纳“选元素—看盒模型—算尺寸—改属性—再验证”。	结果说明 指出自己修复的一个布局问题及所用属性。 规范自查 检查是否存在随意叠加的重复间距。	将实践经验形成调试流程，增强对布局问题的分析能力。

板书设计

盒模型（由内到外）

content → padding → border → margin

标准盒模型：
实际宽度 = width + 左右padding + 左右border

推荐：
* { box-sizing: border-box; }

调试：选择元素 → 查看盒模型 → 测量 → 修改

教学成效与反思

教学成效	学生能够区分内边距和外边距，使用盒模型优化页面分区。通过计算与开发者工具测量，多数学生成功解决了宽度溢出和内容贴边问题。
教学反思	盒模型计算对部分学生仍较抽象，单纯公式讲解效果有限。应保持“纸面计算—浏览器测量—切换规则”的三步验证，并限制同一环节引入过多尺寸单位。