4.5-css元素所占空间的计算（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 css元素所占空间的计算 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 让学生了解CSS中元素所占空间的概念，包括元素框模型和布局模型。 · 使学生掌握如何计算不同级别的DOM标准和弹性布局模型下的元素所占空间。 · 学会使用CSS的box-sizing属性来控制元素的盒模型。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 · 元素框模型（Box Model）的概念和组成部分。 · 标准布局模型（Block Layout）和浮动布局模型（Float Layout）下的元素空间计算。 教学难点 · 理解不同布局模型下元素空间计算的区别。 · 掌握弹性布局和网格布局中的元素空间计算方法。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 讲授法：介绍元素框模型和布局模型的基本概念。 · 案例分析法：通过分析实际案例，加深学生对元素空间计算的理解。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 · 回顾上节课学习的HTML基本标签和CSS基础样式。 · 展示几个不同类型的网页布局案例，激发学生的学习兴趣。 · 提出问题：你们知道网页中的元素是如何占据空间的吗？ 2分钟 讲授新课 练习指导 在CSS中，元素所占空间的概念是指元素在页面上所占据的实际尺寸和位置。这个概念包括两个重要的组成部分：元素框模型（Box Model）和布局模型（Layout Model）。 1. **元素框模型（Box Model）**：元素框模型是CSS中用于描述元素所占据空间的基本模型。它包括以下四个部分： - 内容区域（Content Area）：这是元素实际内容所占据的区域，如文本、图片等。 - 内边距（Padding）：位于内容区域与边框之间的区域，用于分隔内容与边框。 - 边框（Border）：包围内容区域和内边距的线框，可以设置边框的宽度、样式和颜色。 - 外边距（Margin）：位于边框外围的区域，用于分隔相邻元素。 元素框模型的宽度和高度是由内容区域的宽度和高度加上内边距、边框和外边距的宽度和高度得到的。 2. **布局模型（Layout Model）**：布局模型是CSS中用于描述元素在页面上的布局方式的概念。布局模型决定了元素如何在页面上相互排列和定位。CSS中有多种布局模型，包括： - 标准布局模型（Block Layout）：这是默认的布局模型，适用于块级元素（如`<div>`、`<p>`等）。块级元素在文档流中独占一行，宽度默认为父元素的宽度，可以设置宽度和高度。 - 浮动布局模型（Float Layout）：通过为元素设置`float`属性（如`left`或`right`），可以使元素脱离标准布局模型，在页面上浮动到左侧或右侧。浮动布局模型常用于实现多栏布局和文字环绕效果。 - 弹性布局模型（Flexbox Layout）：通过为父元素设置`display: flex`，可以使其成为弹性容器，子元素会自动根据容器的宽度和高度进行排列和调整。弹性布局模型适用于各种复杂的页面布局，特别是对于响应式设计。 - 网格布局模型（Grid Layout）：通过为父元素设置`display: grid`，可以使其成为网格容器，子元素会根据网格的行和列进行排列和调整。网格布局模型适用于创建精确的网格布局，特别是对于固定的网格结构。 了解元素框模型和布局模型的概念和组成部分，对于理解CSS中元素所占空间的计算和布局方式至关重要。通过掌握这些概念，可以更好地控制元素在页面上的位置和尺寸，从而实现更灵活的页面布局和设计。在实际应用中，根据设计需求选择合适的布局模型，以达到最佳的布局效果。 要使学生掌握如何计算不同级别的DOM标准和弹性布局模型下的元素所占空间，以及使用CSS的box-sizing属性来控制元素的盒模型，可以按照以下步骤进行教学： 1. **DOM标准和弹性布局模型下的元素空间计算**： - 让学生了解DOM标准和弹性布局模型的基本概念。 - 通过实例演示，让学生计算DOM标准和弹性布局模型下的元素所占空间。 - 讨论不同布局模型下元素空间计算的区别。 2. **box-sizing属性的用法**： - 介绍box-sizing属性的作用，特别是content-box和border-box两种值。 - 通过实例演示如何使用box-sizing属性来控制元素的盒模型。 - 让学生练习使用box-sizing属性来调整元素的盒模型。 以下是具体的教学步骤： ### 第一步：DOM标准和弹性布局模型下的元素空间计算 1. 讲解DOM标准和弹性布局模型的基本概念。 - 解释DOM标准布局模型（块级元素的默认布局方式）和弹性布局模型（通过`display: flex`实现的布局方式）。 - 讲解在这两种布局模型下如何计算元素所占空间。 2. 实例演示：计算DOM标准和弹性布局模型下的元素空间。 - 准备一个简单的HTML结构，包含块级元素和弹性容器。 - 为元素设置不同的内外边距、边框和宽高。 - 观察元素在DOM标准和弹性布局模型下的空间占据情况。 3. 讨论不同布局模型下元素空间计算的区别。 - 比较DOM标准和弹性布局模型下元素空间计算的差异。 - 分析在不同布局模型下如何调整元素的宽高和位置。 ### 第二步：box-sizing属性的用法 1. 讲解box-sizing属性的作用。 - 解释box-sizing属性的作用，特别是content-box和border-box两种值。 - 讲解content-box模式下元素的盒模型计算方式。 - 讲解border-box模式下元素的盒模型计算方式。 2. 实例演示：使用box-sizing属性调整元素的盒模型。 - 准备一个简单的HTML结构，包含一个块级元素。 - 为元素设置内外边距、边框和宽高。 - 观察元素在content-box和border-box模式下的空间占据情况。 3. 练习：使用box-sizing属性调整元素的盒模型。 - 让学生尝试使用不同的box-sizing属性值来调整元素的盒模型。 - 让学生观察不同box-sizing属性值对元素空间计算的影响。 通过这些步骤，学生可以学会如何计算不同级别的DOM标准和弹性布局模型下的元素所占空间，以及如何使用CSS的box-sizing属性来控制元素的盒模型。这对于理解CSS布局和设计的原理和方法至关重要。在实际应用中，根据设计需求选择合适的布局模型和盒模型，以达到最佳的布局效果。 10分钟 7分钟 自主学习 8分钟 练习训练 · 给定一些网页布局任务，要求学生使用CSS进行元素空间计算。 · 提供一些选择题和填空题，以检验学生对元素空间计算掌握的程度。 12分钟 布置作业 · 设计一个简单的网页布局，要求使用至少两种不同的布局模型。 · 编写相应的HTML和CSS代码，并在本地浏览器中测试效果。 1分钟 总结回顾 · 回顾元素框模型和布局模型的重要性和计算方法。 · 总结本节课学习的关键点和易错点。 · 鼓励学生在课后继续探索和学习相关的CSS布局知识。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$