6-3元素的类型与转换.docVIP

课程名称 WEB前端开发（1） 课次 19 任务、项目、课题名称 元素的类型与转换 课时 2学时 教学内容 块元素、行内元素 元素的转换 块元素间的外边距 教学目标 理解块元素、行内元素 掌握元素的转换 理解块元素间的外边距 教学重点 元素的转换 教学难点 块元素间的外边距 教学活动及主要环节 复习提问： 设置元素的CSS背景使用什么属性？ 导入新课： 互动——块元素？行内元素？ HTML提供了丰富的标记，用于组织页面结构。为了使页面结构组织更加轻松、合理，HTML标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。 新授：（案例演示） 块元素 块元素在页面中以区域块的形式出现，其特点是：每个块元素通常都会占据一整行或多行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。div标记是最典型的块元素。 行内元素 行内元素也称为内联元素或内嵌元素，其特点是：不必在新的一行开始，同时，也不强迫其他元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占据独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度和对齐等属性，常用于控制页面中的特殊文本的样式。span标记是最典型的行内元素。 三．元素的转换 网页是由多个块元素和行内元素构成的盒子排列而成的。使用display属性对元素的类型进行转换。 display属性常用的属性值及含义如下： inline：行内元素 block：块元素 inline-block：行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。 none：元素被隐藏、不显示。 四．块元素间的垂直外边距 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是两者的和，而是两者中的较大者。 小结： 块元素、行内元素 元素的转换 块元素间的外边距 作业： 巩固复习