第5单元 盒子模型的概念（教案1：2 学时）

教学设计一、基本信息课程名称Web前端开发技术课题名称5.1盒子模型的概念授课班级授课时间授课类型理实一体化、新授课授课地点机房（联网，支持超星教学平台）授课学时40分钟*2学时教材分析本节选自《Web前端开发技术》第五单元第一部分，是CSS布局的核心基础。盒子模型将页面元素具象化为“盒子”，承接前文HTML元素排版知识，为后续盒子属性设置、定位及网页布局奠定理论与实操基础，在整个前端开发知识体系中起承上启下的关键作用。学情分析1.前置基础：已掌握HTML基础标签及简单排版，能创建基础网页结构，对CSS有初步认知，具备机房上机实操能力。

2.学情特点：动手能力强、具象思维突出，但抽象逻辑较弱，对“模型”类抽象概念理解较慢，易混淆盒子各组成部分的作用。

3.潜在问题：对“元素即盒子”的具象化转化存在困难，需通过实物类比和实操强化理解。教学目标【知识目标】：

1.理解CSS盒子模型的核心概念，明确每个HTML元素都是一个“盒子”。

2.掌握盒子模型的四个组成部分（内容区、内边距、边框、外边距）及各自定义。

【能力目标】：

1.能通过浏览器开发者工具查看元素的盒子模型结构。

2.能独立编写简单代码，直观呈现盒子模型各组成部分。

【素质目标】：

1.培养严谨的代码编写习惯和问题排查意识。

2.提升抽象概念具象化转化能力和团队协作沟通能力。教学重点1.CSS盒子模型的核心概念及“元素即盒子”的认知。

2.盒子模型四个组成部分（内容区、内边距、边框、外边距）的定义及区分。教学难点1.盒子模型各组成部分的空间关系及对元素布局的初步影响。

2.浏览器开发者工具查看盒子模型的实操应用。教学准备1.硬件：机房计算机（每人一台，联网）、投影仪、黑板。

2.软件：浏览器（Chrome/Firefox）、VSCode、超星教学平台（提前上传课件、案例代码、实操任务单）。

3.素材：盒子模型实物类比道具（礼盒、包装纸、填充物）、课件PPT、实操案例代码、课堂小任务单。教学方法1.主导方法：BOPPPS教学法（分六环节落实教学）。

2.辅助方法：理实一体化教学法、案例演示法、讲练结合法、实物类比法、小组协作法。板书设计5.1CSS盒子模型（概念）

一、核心：HTML元素=盒子

二、组成（从内到外）：

1.内容区（content）：元素实际内容

2.内边距（padding）：内容与边框间距

3.边框（border）：盒子轮廓

4.外边距（margin）：盒子间间距二、教学设计教学环节教学内容师生活动设计意图/时间环节一：导入（Bridge-in）1.情景提问：展示一个排版杂乱的网页和一个布局整齐的网页，提问“为什么同样的元素，排版效果差异巨大？”

2.实物类比：拿出礼盒道具，说明礼盒由“礼物（内容）、填充物（内边距）、礼盒外壳（边框）、礼盒间空隙（外边距）”组成，引出CSS盒子模型概念，类比HTML元素与礼盒的对应关系。

3.明确本节课目标：掌握盒子模型概念及组成，能通过代码和工具查看盒子结构。教师：展示网页案例，演示礼盒类比，提出问题引导思考，明确学习目标。

学生：观察案例，结合实物理解类比关系，带着问题进入学习，主动回应教师提问。设计意图：用实物类比化解抽象概念，结合情景提问激发兴趣，衔接前置HTML知识，铺垫本节课核心内容。

时间：10分钟环节二：目标（Objective）1.知识目标：掌握盒子模型概念及四大组成部分的定义、区分。

2.能力目标：会用浏览器开发者工具查看盒子结构，能编写代码呈现盒子组成。

3.素养目标：培养严谨代码习惯和团队协作意识，提升抽象概念具象化能力。教师：通过超星教学平台展示教学目标，逐条解读，强调重点目标及达成要求。

学生：阅读目标，明确本节课学习重点和需掌握的技能，标注疑问点。设计意图：让学生清晰学习方向，明确重难点，增强学习针对性和目的性。

时间：5分钟环节三：前测（Pre-assessment）1.基础提问：HTML中常用的块级元素和行内元素有哪些？元素排版的核心需求是什么？

2.实操小任务：在VSCode中创建一个简单HTML文件，添加一个div元素，设置基础文本内容，保存后在浏览器中打开。

3.问题反馈：收集学生实操中遇到的问题，了解对HTML元素排版的掌握程度。教师：提出提问，巡视学生实操情况，收集共性问题并简要解答，记录学生基础掌握情况。

学生：回答提问，独立完成实操任务，反馈遇到的问题（如元素不显示、浏览器打开异常等）。设计意图：检测前置HTML知识掌握情况，衔接本节课内容，为后续教学调整提供依据，同时激活学生已有知识储备。

时间：10分钟环节四：参与式学习（ParticipatoryLearning）1.知识点讲解：结合礼盒类比，详解盒子模型四大组成部分。

（1）内容区（content）：元素实际内容（文本、图片等），可通过width、height设置尺寸。

（2）内边距（padding）：内容区与边框之间的距离，无背景色时透明，可设置上下左右四个方向值。

（3）边框（border）：盒子的轮廓，可设置宽度、样式、颜色，是盒子可见的边界。

（4）外边距（margin）：盒子与其他盒子之间的距离，完全透明，用于控制元素间间距。

2.案例演示：编写代码，为div元素依次添加content、padding、border、margin，在浏览器中实时演示效果，对比各部分作用。

3.小组协作实操：将学生分成4人小组，每组分配一个盒子组成部分，结合案例代码，修改参数（如边框样式、内边距大小），观察效果变化，总结该部分的特性。

4.开发者工具应用：演示Chrome浏览器开发者工具的使用，指导学生通过“Elements-Computed”查看盒子模型各部分尺寸。教师：讲解知识点，演示案例代码和开发者工具使用，分组并分配任务，巡视指导小组实操，解答小组疑问，引导小组总结特性。

学生：认真听讲，观察演示，小组协作完成实操任务，尝试修改参数观察效果，学习使用开发者工具，总结对应组成部分特性，小组代表发言分享总结结果。设计意图：采用“讲解+演示+小组协作”模式，贴合职校生动手能力强的特点，让学生在实操中理解知识点，突破重点；通过开发者工具应用，初步解决难点。

时间：40分钟（第一学时结束）环节五：后测（Post-assessment）1.理论小测：通过超星教学平台发布5道选择题（考查盒子模型概念、组成部分定义及区分），限时5分钟完成。

2.实操任务（核心）：独立完成代码编写，要求如下：

（1）创建HTML文件，添加一个div元素作为盒子，设置内容区文本为“我的第一个盒子模型”，宽度200px、高度100px。

（2）设置边框：宽度2px、实线、红色。

（3）设置内边距：上下10px、左右15px。

（4）设置外边距：上下5px、左右自动（实现水平居中）。

（5）用浏览器开发者工具查看盒子各部分尺寸，截图保存至超星平台。

3.成果点评：抽取3-5份学生作品，展示并点评，纠正共性错误（如内边距与外边距混淆、边框样式未设置导致不显示等）。教师：发布小测和实操任务，巡视指导，抽取作品点评，讲解共性问题及解决方案。

学生：完成理论小测，独立编写代码完成实操任务，使用开发者工具查看并截图提交，对照点评内容修改自身作品，标注错误点。设计意图：通过理论+实操双检测，巩固知识点掌握，检验教学效果，及时纠正错误，强化重点、突破难点。

时间：20分钟环节六：总结（Summary）1.知识点梳理：带领学生回顾盒子模型核心概念，总结四大组成部分的定义、作用及空间关系，结合板书强化记忆。

2.技能回顾：回顾浏览器开发者工具查看盒子模型的步骤，强调代码编写的注意事项（如单位规范、属性书写格式）。

3.拓展衔接：说明本节课知识是后续盒子属性设置、定位及网页布局的基础，预告下节课将学习盒子模型相关属性的具体设置方法。教师：梳理知识点和技能点，强调重点内容，衔接下节课内容，解答学生遗留疑问。

学生：跟随教师梳理知识，回顾实操步骤，记录重点内容，提出遗留疑问并寻求解答。设计意图：系统梳理本节课内容，强化学生记忆，形成知识体系，为下节课内容做好铺垫，解决学生遗留问题。

时间：5分钟三、课后作业和教学反思课后作业1.完善课堂实操任务代码，添加2个额外div元素，分别设置不同的边框样式、内边距和外边距，实现三个盒子的整齐排列，保存文件并提交至超星平台。

2.使用浏览器开发者工具，查看任意一个网页（如百度首页）的头部导航栏元素，截图其盒子模型结构，标注各组成部分，附简要说明（1-2句话）提交。教学反思1.