《web前端技术》(赵敏)003-0教案 第12课 CSS3布局之盒子模型和元素排版

PAGE1PAGE1PAGE2PAGE2

课题第12课CSS3布局之盒子模型和元素排版课时2课时（90min）教学目标知识技能目标：（1）掌握盒子模型的相关知识，包括盒子模型的基本结构和属性，以及不同类型元素的盒子模型（2）掌握元素的排版，包括标准流排版、浮动排版和定位排版素质目标：（1）学习盒子模型和元素的排版，增加知识储备，提升网页布局技能（2）感受理论与实践相结合，锻炼思维能力，培养工作思维教学重难点教学重点：盒子模型的基本结构和属性、不同类型元素的盒子模型教学难点：元素的排版，包括标准流排版、浮动排版和定位排版教学方法问答法、讨论法、讲授法、实践练习法、演示法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂教学设计第1节课：→→→传授新知（25min）→实战拓展（15min）第2节课：→传授新知（25min）→实战拓展（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务从网上查找盒子模型和元素排版的相关知识，了解盒子模型是什么，元素排版分为哪些类别【学生】完成课前任务通过课前任务，使学生了解盒子模型和元素排版的相关知识，增加学生的学习兴趣，提前对知识有了了解，方便上课时理解知识点考勤（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（3min）【教师】提出问题在之前的课程中，我们学习了CSS的常用属性，对网页的文本、图像、超链接、列表、表格等进行了美化，但我们在网页的整体排版时，该怎么布局才让网页看起来合理呢？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识网页中的每个元素都可以看作一个矩形的盒子，通过设置盒子的边框、边距与浮动等属性，可以对元素进行排版，从而构建不同的布局版式。此外，随着移动设备的普及，网页在移动端的响应式布局受到开发人员的广泛关注。所谓盒子模型，其实就是在网页制作中设置CSS样式时使用的一种思维模型。盒子模型是网页布局的基础，使用它便于控制网页中元素的排列方式。本节课将会详细介绍盒子模型。通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（25min）7.1盒子模型7.1.1盒子模型的基本结构【教师】讲解盒子模型的基本结构，展示图“盒子模型的基本结构”辅助理解HTML中的大部分元素（特别是块级元素，如html、body、div等）都可以看作是一个盒子，网页元素的定位实际就是这些大大小小的盒子在页面中的定位。一个标准的W3C盒子模型由4个部分组成，包括内容（content）、边框（border）、内边距（padding）和外边距（margin），…（详见教材）【学生】聆听、记录、理解7.1.2盒子模型的属性【教师】讲解盒子模型的属性，并演示例子辅助理解1．盒子模型的内容盒子模型的内容是其中心，它呈现了盒子的主要信息，这些信息可以是文本、图像等多种元素。在盒子模型的基本结构中，内容是盒子模型必备的组成部分，其他3个部分是可选的。在CSS3中，分别使用属性width和height设置内容区域的大小。【课堂拓展】width和height属性只作用于内容区域。也就是说，一个盒子模型实际所占空间的宽度与高度为：width(real)=width(content)+2×(border+padding+margin)height(real)=height(content)+2×(border+padding+margin)【课堂拓展】在CSS3中，使用box-sizing属性可以更改width、height属性的作用范围，具体格式为：box-sizing:content-box|border-box;其中，content-box是默认值，表示这两个属性作用于内容区域；border-box表示这两个属性作用于边框及其内部区域。2．盒子模型的边框盒子模型的边框是指包围了盒子内边距和内容的边界。因为边框会占据空间，所以在排版计算时要考虑盒子模型边框的影响。…（详见教材）3．盒子模型的内边距盒子模型的内边距是指边框和内容之间的空白区域。在CSS3中，使用padding属性设置盒子模型的内边距，具体格式为：…（详见教材）【课堂拓展】padding属性可以撑大元素的尺寸，即设置padding样式后，整个元素的宽度和高度都会变大。此外，背景颜色属性不仅对内容区域有效，还对内边距区域有效，即背景颜色可以延伸到内边距区域。4．盒子模型的外边距盒子模型的外边距是指边框与周围其他盒子之间的空白区域。在CSS3中，使用margin属性设置盒子模型的外边距，具体格式为：…（详见教材）【例7-1】设置盒子模型的样式，包括内容、边框、内边距和外边距等（以下提供部分代码），…（详见教材）【学生】聆听、记录、理解、观看效果7.1.3不同类型元素的盒子模型【教师】讲解不同类型元素的盒子模型不同类型元素的盒子模型在设置属性时有不同的效果，下面分别介绍。（1）块级元素。块级元素在页面中独占一行。默认情况下，它的宽度和高度自动填满父元素的宽度和高度，也可以使用width和height属性设置块级元素的宽度和高度。…（详见教材）（2）行内元素。行内元素在页面中按照从左到右、从上到下的顺序排列，不会单独分行。…（详见教材）【课堂拓展】行内元素的上、下内边距实际上是可以设置的，但是因为无法拉高父元素的高度，所以一般情况下没有显示效果。（3）行内块元素。行内块元素就是显示在同一行中的块级元素，可以为其设置width、height、border、padding和margin属性。…（详见教材）【学生】聆听、记录、理解通过教师的讲解使学生了解盒子模型的基本结构、属性、不同类型元素的盒子模型实战拓展（15min）【教师】要求学生根据上课所学知识和例7-1，制作队伍的项目，要求把文字部分做为一个盒子，调整盒子的内容，边框、外边距，内边距。可以互相讨论或询问老师【学生】讨论、思考、操作通过实践学习，巩固学生对盒子模型的理解与掌握，并锻炼学生的实际操作能力第二节课问题导入（5min）【教师】提出问题CSS3布局是Web标准推荐的网页布局方式。通过学习盒子模型可以发现，一个网页元素就是一个盒子，对网页元素的布局就是对一个个盒子的布局。网页中盒子的排列方式各不相同，且彼此影响，那对整体的布局应该怎么排版？有哪些方式？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（25min）7.2元素的排版7.2.1标准流排版【教师】讲解标准流排版的方式，并演示例子辅助理解标准流排版是指在不使用任何与排版和定位相关的CSS规则时，各种页面元素默认的排版规则，即一个个盒子形成一个序列，同级别的盒子依次在父级盒子中按照块级元素或行内元素的排列方式排列，同级父级盒子又依次在它们的父级盒子中排列，依此类推。……（详见教材）【例7-2】标准流排版示例（以下提供部分代码），……（详见教材）【学生】观看效果、聆听、记录、理解7.2.2浮动排版【教师】讲解浮动排版的方式，并演示例子辅助理解浮动排版可以改变块级元素的默认排版，在浮动排版中，块级元素的宽度不再自动伸展，而是由盒子里放置的内容及内边距决定其宽度，要修改该宽度，可设置元素的宽度和内边距。1．浮动设置在CSS3中，使用float属性设置元素浮动，具体格式为：float:none|left|right;……（详见教材）【例7-3】为图像元素设置浮动属性（以下提供部分代码），……（详见教材）使用浮动属性可以灵活地设置元素位置，但也会产生一些副作用。例如，元素一旦设置为浮动，其下方的元素将上移，此时网页的布局将会混乱，……（详见教材）2．浮动清除为了解决使用浮动属性产生的副作用，常采用浮动清除的方式。在CSS3中，使用clear属性清除元素某侧的浮动元素，具体格式为：……（详见教材）【课堂拓展】通过设置父元素的宽度和高度也可以解决父元素高度不能自适应扩展的问题，但是这种解决方法存在弊端，即子元素的高度必须是固定的，因此常使用浮动清除的方法解决此类问题。【例7-4】设置浮动清除，防止网页布局混乱（以下提供部分代码），……（详见教材）当元素设置为浮动后，父元素的高度不能再根据子元素自适应扩展，这种情况称为高度塌陷。高度塌陷问题产生的主要原因是父元素无法识别浮动子元素的高度。……（详见教材）【例7-5】在父元素末尾添加一个空的div标签，并设置其clear属性值为both，解决高度塌陷问题……（详见教材）【课堂拓展】div是块级元素，为其设置clear属性之后，它会自动排到所有元素的下一行，父元素识别该div元素后，其高度便可以自适应扩展了。此外，还有两种方法可以解决高度塌陷问题。（1）使用伪元素选择器::after，在匹配元素内的最后添加内容。例如，在div元素末尾添加“这是div元素”文本，……（详见教材）（2）使用overflow属性，为父元素设置“overflow:hidden;”样式，除了能够进行溢出处理，也能够解决高度塌陷问题。……（详见教材）【学生】观看效果、聆听、记录、理解7.2.3定位排版【教师】讲解定位排版的方式，并演示例子辅助理解定位排版和浮动排版一样，都可以改变网页元素的默认排版，使用定位排版还可以对网页元素进行精确定位。CSS3提供了用于对元素进行精确定位的属性。在CSS3中，使用position属性设置元素的定位模式，具体格式为：……（详见教材）1．相对定位定位模式为相对定位的元素将以其在标准流中的原位置为基准，根据所设置的偏移量向对应方向移动一定距离，并且保留它在标准流中的位置。在设置偏移量时，上下与左右方向只需要设置一个属性值。……（详见教材）【例7-6】设置元素的相对定位……（详见教材）2．绝对定位定位模式为绝对定位的元素将以最近的已定位（相对、绝对或固定定位）父元素的位置为基准，根据所设置的偏移量向对应方向移动一定距离。……（详见教材）【例7-7】设置元素的绝对定位……（详见教材）【课堂拓展】如果只设置定位模式为绝对定位，但不设置偏移量，则元素的位置不变，但因其脱离标准流，将与后续上移的元素重叠。3．固定定位固定定位是绝对定位的特殊情况，即全部以浏览器窗口为基准进行定位。为元素设置固定定位后，该元素脱离标准流，始终显示在浏览器窗口的固定位置，不随浏览器窗口大小变化或滚动条移动而改变。【例7-8】设置元素的固定定位，……（详见教材）4．堆叠顺序对元素进行定位排版时，可能会出现元素堆叠的情况，默认情况下，标准流中越靠后的元素显示在越靠上的层级。在CSS3中，使用z-index属性设置元素的堆叠顺序，调整定位元素的显示层级，其属性值可以为负数、正数和0（默认值）。属性值越大，定位元素将显示在越靠上的层级（属性值相同则以标准流为基准，越靠后的元素显示在越靠上的层级）。【例7-9】设置元素的堆叠顺序，……（详见教材）【课堂拓展】z-index属性只能用于设置定位元素（相对、绝对或固定定位）的堆叠顺序。父元素的z-index属性值无法与子元素进行比较，想要将子元素显示在父元素的下层，可在父元素保持默认设置的情况下将子元素的z-index属性值设置为负数。【学生】观看效果、聆听、记录、理解通过讲解和演示例子，使学生掌握标准流排版、浮动排版和定位排版的方式实战拓展(10min)【教师】要求学生根据上课所学知识和例7-2到例7-9，要求将自己小队项目的的网页主页进行排版，要求合理，页面美观，可以互相讨论或询问老师【学生】讨论、思考、操作通过实践操作任务，使学生巩固理解元素排版模型的类型和使用，并锻炼学生的动手操作能力课堂小结（3min）【教师】简要总结本节课的要点本节课主要介绍了CSS3布局的基础知识。通过本节课的学习，学生应重点掌握以下内容。（1）一个标准的W3C盒子模型由4个部分组成，包括内容（content）、边框（border）、内边距（padding）和外边距（margin）。此外，CSS3提供了不同的属性用于设置盒子模型的样式。（2）CSS3提供了不同的元素排版模型，包括标准流排版、浮动排版和定位排版等。【学生】总结回顾知识点总结知识点，使学生牢固