2024年6月6日发(作者：)

教案名称 任务4 制作学院介绍页面

理解盒子模型概念

掌握盒子大小计算方式

计划学时 6学时

知识目标

掌握盒子模型的相关属性

掌握背景颜色设置方法

掌握背景图像设置方法

培养学生作风严谨、精益求精的工匠精神

引导学生认识美、发现美、创造美

盒子模型的相关属性

设置背景颜色

设置背景图像

综合设置背景

盒子大小计算方式

教学做一体化

线上+线下混合教学

教学活动及主要环节

第1、2学时

（盒子模型）

素质目标

教学重点

教学难点

教学模式

思政元素

切入点

课前发布任务：

观看学习通平台相关学习视频。

做课前测试题。

I.学生讨论：（10分钟）

盒子模型中的盒子有哪些属性？网页中哪些元素是盒子？

II.重难点内容讲授：

一、盒子模型 （15分钟）

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一

个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框(border)

和外边距(margin)组成。

盒子模型

的宽度和

高度与它

的内容、边

框、内边距

有关。内

容、边框、

二、盒子大小计算方式（20分钟）

内边距影

响盒子的

大小，要计

一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”

算准确。

组成的。

练习：定义一个盒子，设置相关属性。（5分钟）

三、盒子模型的相关属性（40分钟）

1．边框属性border

边框（border）属性设置方式如下：

❖ border-top：上边框宽度 样式 颜色

❖ border-right：右边框宽度 样式 颜色

❖ border-bottom：下边框宽度 样式 颜色

❖ border-left：左边框宽度 样式 颜色

若四个边框具有相同的宽度、样式和颜色，则可以一个次设置如下：

border：边框宽度 样式 颜色

注意：边框宽度、样式和颜色属性的顺序可以随意。

边框样式的常用属性值有以下5个。

❖ solid：边框样式为单实线。

❖ dashed：边框样式为虚线。

❖ dotted：边框样式为点线。

❖ double：边框样式为双实线。

❖ none：没有边框。

2．圆角边框属性border-radius

格式:border-radius:圆角半径;