Web前端开发实例与实战第6 章 DIV+CSS布局.docxVIP

编写日期：授课日期：任课教师：

课程

名称

《Web前端开发实例与实战》

授课

专业

授课

班级

周次

节次

授课

章节

第6章

DIV+CSS布局

授课

学时

3学时

教学

目标

知识

1.了解框模型。

2.了解框模型的边框与边距。

3.了解浮动设计。

能力

1.熟知内联元素span标签。

2.能够使用不同属性值处理内容溢出。

3.能够使用浮动让列表水平布局。

素质

培养学生的实践能力和创新思维。

教学

重点

制作网站搜索栏

教学

难点

使用relative属性值对元素的位置进行设置

教学

方法

教学环节包括课堂讲授、集体讨论、师生互动、课后答疑等

教学

用具

多媒体、课件

教学

内容

第6章DIV+CSS布局

6.1div与span

div元素和span元素是网页布局中的块级和行内盒子元素。使用它们可以将多个其他元素进行打包排版，从而提供网页排版的效率。

6.1.1块元素div标签

div标签属于块级元素，它类似于一个容器，可以组合其他的HTML元素。简单理解

div标签就是一个可以随意DIY的空盒子，在div元素中可以存放HTML的其他元素。

6.1.2内联元素span标签

span标签属于内联元素，也叫行内元素。该标签的作用是用以组合文档中的其他行内元素。span标签内可以添加其他的HTML行内元素。例如，一段文本内容，包括了a标签、b标签，但是它们合起来是一个商品的名称，它们的字号、背景色等其他样式都是相同的，此时就可以使用span标签将a标签和b标签的内容划分为一组，从而在添加CSS样式和管理时将十分方便。

6.1.3元素类型转换

元素类型转换是指将块级元素转换为行内元素，或将行内元素转换为块级元素。之所以要转换，是因为块元素和行内元素可用的CSS属性不同。

6.2框模型

框模型（boxmodel）是HTML布局中最重要的一个概念。在HTML中所有的元素都被视为一个“盒子模型”或“框模型”。通过框模型的概念可以精准地实现对元素的位置布局。

6.2.1框模型的边框与边距

框模型由内容、边框、内边距和外边距4个部分组成，使用不同的CSS属性可以对它们进行对应的设置。

1.边框

在表格章节中已经讲解过使用border属性统一设置边框样式的相关内容。在了解了框模型概念后可以知道，border属性不但可以设置表格的边框，还可以设置其他所有元素的边框。除了border属性外，border的其他分支属性也可以用来对边框的每条边的样式进行分别设置。

2.内边距

内边距是指框模型中元素内容与边框之间的距离。使用内边距可以在任何元素的内容周围生成空间。内边距使用padding属性实现，该属性可以实现设置元素的4个方向到边框之间的距离，设置顺序不可调整。

3.外边距

外边距用于设置元素边框以外的空间距离，会在元素的周围创建空间。就像在快递时给物品做一个木架保护起来一样，在物品外面会有一层空间。外边距使用margin属性实现，该属性可以实现设置元素的边框向4个方向延展的距离，设置顺序不可调整。

6.2.2框模型的宽和高

框模型的宽和高不能只计算元素的width属性和height属性值。width属性和height属性只能设置元素内容的高度和宽度，不是整个元素（框模型）的宽度和高度。元素的总宽度计算公式如下所示。

元素总宽度=宽度+左内边距+右内边距+左边框+右边框+左外边距+右外边距

元素的总高度计算公式如下所示。

元素总高度=高度+上内边距+下内边距+上边框+下边框+上外边距+下外边距

6.2.3圆角边框

圆角看起来很现代，传达了简约、乐观和开放的感觉。圆角的应用从移动应用UI开始，然后扩展到了WebUI中。W3C发布的CSS3.0的标准中大幅度调整了背景图像和边框的精细修改，使边框的直角修改为了圆角。

边框圆角效果需要使用border-radius属性实现，该属性能将边框的4个直角改成圆角，设置顺序不可调整。

6.2.4边框阴影

边框阴影是为边框添加水平阴影和垂直阴影。使用CSS的box-shadow属性可以为元素添加多个阴影，其语法形式如下所示。

box-shadow:阴影属性值1,阴影属性值2,……,阴影属性值n;

其中，每组阴影属性值都包括水平阴影位置（h-shadow）、垂直阴影位置（v-shadow）、阴影模糊距离（blur）、阴影的尺寸（spread）、阴影的颜色（color）及将外部阴影改为内部阴影（inset）。在所有属性中，水平阴影和垂直阴影是必须设置的值。

6.3浮动与定位

网页元素布局的默认顺序是从上到下纵向布局，元素的横向布局也是网页布局中十分重要的一部分内容。CSS的浮动和定位属性的功能是让网页元素可以进行精准的横向布局。

6.3.1浮动设计

浮动设计是使用flo