教学目标

1. 知识目标

了解弹性盒的组成结构

‚理解弹性盒与普通盒模型的区别

ƒ掌握弹性盒容器、主轴和交叉轴的设置方法

„理解掌握弹性盒布局的常用属性及其可用值

2、能力目标

能区分弹性盒与普通盒模型的差异

‚能熟练设置弹性盒容器、主轴和交叉轴

ƒ能熟练通过相关属性设置弹性盒布局

3、素质目标

科学严谨的学习态度

‚自主学习能力

ƒ分析和解决问题能力

„沟通能力

…团队协作能力

课程思政

案例概述

案例背景：响应式Web设计主要面向的是移动端设备，最典型的是手机。要在有限尺寸的屏幕上展现网页内容，对页面布局的细节掌控要求就非常高。每个像素的布局都要严格按设计意图呈现，一点失控都可能导致整个页面布局混乱。因此，普通盒模型的外边距合并现象就不能满足响应式Web设计的要求，弹性盒布局应运而生。

案例思路：先引导学生回顾先修课中学过的普通盒模型的外边距合并现象，说明该现象在响应式Web设计中可能会对页面布局造成干扰；鼓励学生发扬工匠精神，精益求精，这一点与响应式Web设计中“用户体验优先”的指导思想完全契合；就此引出弹性盒的概念，阐明弹性盒可以很好地避免这一问题，使得页面布局细节可控，进而顺利开展关于弹性盒布局的学习。

思政教学

1.回顾普通盒模型的外边距合并现象

2.思政教学内容

响应式Web设计特别强调“用户体验优先”的理念，与工匠精神非常契合。

3.引出弹性盒布局的概念

特别强调弹性盒改进了盒模型，不会在弹性盒容器与其内容之间合并外边距，是一种非常灵活的布局方法。