4.3.3-css行内块元素（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 css行内块元素 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 让学生了解CSS中行内块元素（inline-block）的概念。 · 使学生掌握如何使用CSS样式控制行内块元素的布局和样式。 · 学会使用CSS的display属性将元素设置为行内块显示。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 · 行内块元素的定义和特点。 · 行内块元素的布局和样式控制。 · display属性的用法，特别是inline-block值。 教学难点 · 如何根据设计需求选择合适的布局方法。 · 行内块元素与其他布局技术的综合运用。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 讲授法：介绍行内块元素的基本概念。 · 案例分析法：通过分析实际案例，加深学生对行内块元素的理解。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 · 回顾上节课学习的CSS布局基础，包括块级元素和行内元素的概念。 · 展示几个结合了行内块元素的网页布局案例，激发学生的学习兴趣。 2分钟 讲授新课 练习指导 行内块元素（inline-block）是CSS中一种特殊的显示类型，它结合了行内元素和块级元素的特点。行内块元素在页面布局中具有重要的作用，它允许元素保持行内元素的特性（如不自动换行），同时具备块级元素的特性（如可以设置宽度和高度）。 行内块元素的主要特点如下： 1. **内联特性**：行内块元素在文档流中与其他行内元素（如文本、图片等）保持在同一行，不会自动换行。 2. **块级特性**：行内块元素可以设置宽度和高度，同时可以设置内外边距、填充等样式。 3. **垂直对齐**：行内块元素可以通过`vertical-align`属性进行垂直对齐。 4. **排列方式**：行内块元素会按照文档流的顺序从左到右排列，如果一行容纳不下，会自动换行。 要将元素设置为行内块显示，可以在CSS中使用`display: inline-block`属性。例如： ```css .inline-block-element { display: inline-block; width: 100px; height: 100px; margin: 10px; padding: 10px; background-color: lightblue; } ``` 在HTML中，可以将需要设置为行内块的元素应用这个类： ```html <div class="inline-block-element">内容1</div> <div class="inline-block-element">内容2</div> <div class="inline-block-element">内容3</div> ``` 通过使用行内块元素，可以实现更灵活的页面布局，同时保持元素的行内特性，使得布局更加紧凑和易于控制。 行内块元素（inline-block）是一种介于行内元素和块级元素之间的显示类型，它允许元素保持行内元素的特性（如不自动换行），同时具备块级元素的特性（如可以设置宽度和高度）。 ### 行内块元素的布局和样式控制 1. **宽度和高度**：行内块元素可以设置宽度和高度，这使得它们可以根据需要进行精确的布局和定位。 ```css .inline-block-element { display: inline-block; width: 100px; height: 100px; } ``` 2. **内外边距**：行内块元素可以设置内边距（padding）和外边距（margin），以调整元素之间的间距和填充。 ```css .inline-block-element { display: inline-block; margin: 10px; padding: 10px; } ``` 3. **垂直对齐**：通过`vertical-align`属性，可以控制行内块元素在其所在行内的垂直对齐方式。 ```css .inline-block-element { display: inline-block; vertical-align: middle; /* 可选值：top, bottom, middle, baseline等 */ } ``` 4. **文本对齐**：对于行内块元素，可以使用`text-align`属性来控制文本的水平对齐方式。 ```css .inline-block-element { display: inline-block; text-align: center; /* 可选值：left, right, center, justify等 */ } ``` ### display属性的用法，特别是inline-block值 `display`属性用于设置元素的显示类型，它可以接受多种值来改变元素的显示方式。其中，`inline-block`值是一个非常有用的值，它将元素设置为行内块显示。 ```css .inline-block-element { display: inline-block; } ``` 使用`display: inline-block`可以将元素转换为行内块元素，从而实现更灵活的布局和样式控制。这种方法在实际应用中非常常见，特别是在需要将块级元素（如`<div>`）放置在同一行或需要对行内元素进行更精细的布局控制时。 通过理解行内块元素的布局和样式控制，以及`display`属性的用法，可以更有效地控制网页布局和设计。 10分钟 7分钟 自主学习 8分钟 练习训练 · 给定一些网页布局任务，要求学生使用CSS控制行内块元素的布局。 · 提供一些选择题和填空题，以检验学生对行内块元素掌握的程度。 12分钟 布置作业 · 设计一个简单的网页布局，要求使用至少两个行内块元素。 · 编写相应的HTML和CSS代码，并在本地浏览器中测试效果。 1分钟 总结回顾 · 回顾行内块元素的重要性和布局控制方法。 · 总结本节课学习的关键点和易错点。 · 鼓励学生在课后继续探索和学习相关的CSS布局知识。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$