4.2.1-css盒子模型宽高属性（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 css盒子模型宽高属性 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 使学生了解CSS盒子模型中宽度（width）和高度（height）属性的概念。 · 让学生掌握如何使用CSS设置盒子模型的宽度和高度属性。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. CSS盒子模型中宽度和高度属性的概念和作用。 2. 如何使用CSS设置盒子模型的宽度和高度属性。 教学难点 1. 如何根据实际需求设置盒子模型的宽度和高度属性。 2. 如何解决盒子模型中宽度和高度属性相关的样式冲突问题。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 讲授法：通过教师的讲解，传授CSS盒子模型宽度和高度属性的基本知识。 2. 案例分析法：通过分析案例，让学生理解CSS盒子模型宽度和高度属性的应用方法和技巧。 3. 实践操作法：通过课堂实践，让学生亲自动手操作，掌握CSS盒子模型宽度和高度属性的应用。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾之前学过的CSS盒子模型的基本概念和构成。 2. 展示一个简单的网页，引导学生观察并思考CSS盒子模型宽度和高度属性在网页设计中的应用。 2分钟 讲授新课 练习指导 在CSS盒子模型中，宽度（width）和高度（height）属性用于设置元素的内容区域的宽度和高度。盒子模型包含内容区域、内边距、边框和外边距，宽度和高度属性只适用于内容区域。 ### 宽度和高度属性的概念和作用 1. **宽度（width）**：宽度属性用于设置元素内容区域的水平尺寸。宽度属性的值可以是长度单位（如像素、百分比等）或者特殊值（如auto）。 ```css div { width: 200px; /* 设置元素内容区域的宽度为200像素 */ } ``` 2. **高度（height）**：高度属性用于设置元素内容区域的垂直尺寸。高度属性的值可以是长度单位（如像素、百分比等）或者特殊值（如auto）。 ```css div { height: 100px; /* 设置元素内容区域的高度为100像素 */ } ``` ### 如何使用CSS设置盒子模型的宽度和高度属性 1. **设置宽度**：使用`width`属性设置元素内容区域的宽度。 ```css div { width: 200px; /* 设置元素内容区域的宽度为200像素 */ } ``` 2. **设置高度**：使用`height`属性设置元素内容区域的高度。 ```css div { height: 100px; /* 设置元素内容区域的高度为100像素 */ } ``` 3. **设置百分比宽度和高度**：使用百分比值设置元素内容区域的宽度和高度，相对于父元素的宽度和高度。 ```css div { width: 50%; /* 设置元素内容区域的宽度为父元素宽度的50% */ height: 50%; /* 设置元素内容区域的高度为父元素高度的50% */ } ``` 4. **设置最小和最大宽度和高度**：使用`min-width`、`max-width`、`min-height`和`max-height`属性设置元素内容区域的最小和最大宽度和高度。 ```css div { min-width: 100px; /* 设置元素内容区域的最小宽度为100像素 */ max-width: 500px; /* 设置元素内容区域的最大宽度为500像素 */ min-height: 100px; /* 设置元素内容区域的最小高度为100像素 */ max-height: 500px; /* 设置元素内容区域的最大高度为500像素 */ } ``` 通过以上方法，可以灵活地控制CSS盒子模型的宽度和高度属性，实现网页元素的布局和样式设置。在实际应用中，可以根据具体情况灵活运用这些方法，以达到最佳的效果。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 根据给定的HTML结构，编写相应的CSS代码，设置盒子模型的宽度和高度属性。 2. 设计一个简单的网页，要求运用CSS盒子模型宽度和高度属性进行页面布局和元素自适应设置。 12分钟 布置作业 1. 完成课后习题练习，并提交代码和效果图。 2. 选择一个自己感兴趣的主题，设计一个运用CSS盒子模型宽度和高度属性的网页作品。 1分钟 总结回顾 1. CSS盒子模型中宽度和高度属性的概念和作用。 2. 如何使用CSS设置盒子模型的宽度和高度属性。 3. CSS盒子模型宽度和高度属性的应用场景和设计原则。 通过本节课的学习，学生应该能够熟练掌握CSS盒子模型宽度和高度属性的应用，提高网页设计的效率和质量。在实际应用中，可以根据具体情况灵活运用这些方法，以达到最佳的效果。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$