网页设计与制作项目教程单元7-CSS布局与网页美化.pptx

1、汤智华汤智华 主编主编王爱红王爱红 主审主审【教学导航】【教学导航】教学目标教学目标（1 1）学会设计页面的布局结构）学会设计页面的布局结构（2 2）学会创建页面布局样式）学会创建页面布局样式（3 3）学会创建美化页面元素的样式）学会创建美化页面元素的样式（4 4）学会插入）学会插入DIVDIV标签对网页的页面进行布局标签对网页的页面进行布局（5 5）学会创建代码片断，且在网页插入已有的代码片断）学会创建代码片断，且在网页插入已有的代码片断（6 6）学会在使用）学会在使用DIVDIVCSSCSS布局的网页中输入文字和插入各种页面元素布局的网页中输入文字和插入各种页面元素本单元重点本单元重点（1

2、 1）设计页面的布局结构）设计页面的布局结构（2 2）创建页面的布局样式）创建页面的布局样式（3 3）创建美化页面元素的样式）创建美化页面元素的样式（4 4）插入）插入DIVDIV标签对网页的页面进行布局标签对网页的页面进行布局本单元难点本单元难点（1 1）设计页面的布局结构）设计页面的布局结构（2 2）插入）插入DIVDIV标签对网页的页面进行布局标签对网页的页面进行布局教学方法教学方法任务驱动法、分组讨论法任务驱动法、分组讨论法7.1 7.1 标准文档流标准文档流 宏观来讲，我们的宏观来讲，我们的WebWeb页面和页面和PhotoshopPhotoshop等设计软件有本质区等设计软件有本质

3、区别别WebWeb页面的制作是个页面的制作是个“流流”，必须从上而下。，必须从上而下。所谓标准所谓标准“流流”，就是标签的排列方式。，就是标签的排列方式。7.1.1 7.1.1 标准标准“流流”的微观现象的微观现象 微观来讲，标准微观来讲，标准“流流”会出现一些特别的现象。会出现一些特别的现象。图图7-2 标准标准“流流”的微观现象的微观现象 从标签的排列方式和浏览器效果图看，标准从标签的排列方式和浏览器效果图看，标准“流流”的微观现象的微观现象如下。如下。1 1空白折叠现象空白折叠现象 “栏目一栏目一”“”“栏目二栏目二”“”“栏目三栏目三”的的标签由于是换行书写标签由于是换行书写的，出现了

4、空白折叠现象。而的，出现了空白折叠现象。而“怎么啦怎么啦怎么啦怎么啦怎么啦怎么啦”的的标签标签由于是紧凑型书写，所以无空白折叠现象。由于是紧凑型书写，所以无空白折叠现象。标签也是如此。标签也是如此。2 2高矮不齐，底边对齐高矮不齐，底边对齐 如果又有图片且图片参差不齐、又有文字。则会出现高矮不齐，如果又有图片且图片参差不齐、又有文字。则会出现高矮不齐，底边对齐的情况。底边对齐的情况。3 3自动换行，一行不满，换行写自动换行，一行不满，换行写 同时，我们发现同时，我们发现“我的未来不是梦我的未来不是梦”的的标签自动换行了。标签自动换行了。怎么会出现以上的标准怎么会出现以上的标准“流流”的微观现象

5、呢？这是因为的微观现象呢？这是因为为块级元素，一般用于配合为块级元素，一般用于配合CSSCSS完成网页的基本布局。完成网页的基本布局。而而为行内元素，一般用于配合为行内元素，一般用于配合CSSCSS修改网页中的修改网页中的一些局部信息。一些局部信息。7.1.2 7.1.2 块级元素和行内元素块级元素和行内元素 标准文档流等级森严。标签分为两种等级：块级元素和行内元素。标准文档流等级森严。标签分为两种等级：块级元素和行内元素。HTMLHTML标记语言提供了丰富的标记，用于组织页面结构。标记语言提供了丰富的标记，用于组织页面结构。为了使页面结构的组织更加轻松、合理，为了使页面结构的组织更加轻松、合

6、理，HTMLHTML标记被定义成了标记被定义成了不同的类型，一般分为块标记和行内标记，也称块级元素和行内元素。不同的类型，一般分为块标记和行内标记，也称块级元素和行内元素。HTML HTML中将标签分为两类：文本级、容器级。中将标签分为两类：文本级、容器级。容器级和文本级标签的区别是：容器级的标签中可以嵌套其他所容器级和文本级标签的区别是：容器级的标签中可以嵌套其他所有的标签，文本级标签中只能嵌套文字、超链接、图片。有的标签，文本级标签中只能嵌套文字、超链接、图片。文本级：文本级：p p、spanspan、a a、b b、i i、u u、emem。所有的文本级标签都是行内。所有的文本级标签都是

7、行内元素，除了元素，除了p p，p p是一个文本级，但是是一个块级元素。是一个文本级，但是是一个块级元素。容器级：容器级：divdiv、h h系列、系列、ul ul、li li、ol ol、dl dl、dt dt、dddd。所有的容器级标签。所有的容器级标签都是块级元素。都是块级元素。一、块级元素一、块级元素 块级元素在页面中以区域块的形式出现，其特点是：每个块级元块级元素在页面中以区域块的形式出现，其特点是：每个块级元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。齐等属性，常用

8、于网页布局和网页结构的搭建。图图7-3 块级元素块级元素 从以上标签的排列方式和浏览器效果图看，块级元素具有以下从以上标签的排列方式和浏览器效果图看，块级元素具有以下特点。特点。首尾自动换行，会另起一行；首尾自动换行，会另起一行；在没有设置在没有设置widthwidth属性的时候，宽度是自动伸展的，伸展到不能伸属性的时候，宽度是自动伸展的，伸展到不能伸展为止；展为止；即使在设置即使在设置widthwidth的时候，给后面的块级元素腾出了位置，后面的的时候，给后面的块级元素腾出了位置，后面的块级元素也不会自动上来。块级元素也不会自动上来。块级元素有：块级元素有：divdiv、p p、ul ul、

9、li li、h h系列、系列、ol ol、dl dl。二、行内元素二、行内元素 行内元素即没有任何样式的时候，自动排成一行的元素。行内元素即没有任何样式的时候，自动排成一行的元素。行内元素也称内联元素或内嵌元素，其特点是：不必在新的一行行内元素也称内联元素或内嵌元素，其特点是：不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。开始，同时，也不强迫其他的元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结它们不占有独立的区域，仅仅靠自身的字体大小和

10、图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。本的样式。图图7-4 行内元素行内元素 从以上标签的排列方式和浏览器效果图看，行内元素具有以下从以上标签的排列方式和浏览器效果图看，行内元素具有以下特点。特点。一个行内元素，在不设定一个行内元素，在不设定widthwidth的时候，的时候，widthwidth自动收缩为自己的内自动收缩为自己的内容的真实宽度。容的真实宽度。行内元素不接受行内元素不接受widthwidth和和heightheight的值，它就认准了自己真实内容的宽、的值，它就认准了自己

11、真实内容的宽、高。但是能接受高。但是能接受paddingpadding值！值！在父容器不够宽的时候，行内元素能够自动折行。在父容器不够宽的时候，行内元素能够自动折行。行内元素有：行内元素有：spanspan、a a、imgimg、b b、i i。7.1.3 7.1.3 块级元素和行内元素的相互转换块级元素和行内元素的相互转换 定义：网页是由多个块级元素和行内元素构成的盒子排列而成的，定义：网页是由多个块级元素和行内元素构成的盒子排列而成的，如果希望行内元素具有块级元素的某些特性，例如可以设置宽高，或如果希望行内元素具有块级元素的某些特性，例如可以设置宽高，或者需要块级元素具有行内元素的某些特性

12、，例如不独占一行排列，就者需要块级元素具有行内元素的某些特性，例如不独占一行排列，就可以使用可以使用displaydisplay属性对元素的类型进行转换。属性对元素的类型进行转换。任何一个元素（任何一个元素（bodybody元素除外）都可以通过元素除外）都可以通过CSSCSS来进行块、行转来进行块、行转换。换。l 行内元素转换为块级元素：行内元素转换为块级元素：display:blockdisplay:block。l 块级元素转换为行内元素：块级元素转换为行内元素：display:inlinedisplay:inline。图图7-5 块级元素和行内元素的相互转换块级元素和行内元素的相互转换 从

13、以上标签的排列方式和浏览器效果图看，块级元素和行内元素从以上标签的排列方式和浏览器效果图看，块级元素和行内元素相互转换后，发生了如下变化。相互转换后，发生了如下变化。l 当给当给#hezi1#hezi1、#hezi2#hezi2设置设置display:inline;display:inline;时，这个时，这个DIVDIV就转换成了行内就转换成了行内元素。它开始以行内元素的标准流的行事规则来定位，控制自己的元素。它开始以行内元素的标准流的行事规则来定位，控制自己的样式，它自己收缩了，样式，它自己收缩了，width:width:属性对它无效了。能在一行显示了。属性对它无效了。能在一行显示了。l

14、当给当给#lianjie#lianjie设置设置display:block;display:block;时，原本行内元素时，原本行内元素之后就变成了块之后就变成了块级元素，有块级元素的特点了，首位换行，能接受级元素，有块级元素的特点了，首位换行，能接受widthwidth、heightheight了。了。元素是做超级链接的，变为元素是做超级链接的，变为blockblock之后，接受鼠标单击的区域就之后，接受鼠标单击的区域就变成了自己这个盒子变成了自己这个盒子borderborder之内的区域。之内的区域。7.1.4 7.1.4 块级元素和行内元素的区别块级元素和行内元素的区别 块级元素和行内元

15、素有较大的区别。块级元素和行内元素有较大的区别。一、块级元素一、块级元素（1 1）会另起一行。）会另起一行。（2 2）可以设置）可以设置widthwidth、heightheight、marginmargin、paddingpadding、borderborder属性。属性。（3 3）默认宽度是容器的）默认宽度是容器的100%100%。二、行内元素二、行内元素（1 1）和其他元素在同一行内。）和其他元素在同一行内。（2 2）高度和宽度就是内容的高度和宽度。）高度和宽度就是内容的高度和宽度。（3 3）可以设置）可以设置margin-leftmargin-left和和margin-rightmar

16、gin-right属性，无法设置属性，无法设置margin-topmargin-top和和margin-margin-bottombottom属性。属性。（4 4）borderborder和和paddingpadding可以设置，但是可以设置，但是border-topborder-top和和padding-toppadding-top到页面顶部到页面顶部后就不再增加。后就不再增加。7.2 7.2 盒模型盒模型7.2.1 7.2.1 认识盒子模型认识盒子模型 什么是什么是“模型模型”?“”?“模型模型”就是事物本质特征的抽象。就是事物本质特征的抽象。把一幅带画框的画看成是一个盒子，如图把一幅带画

17、框的画看成是一个盒子，如图7-67-6所示为两幅带相框的所示为两幅带相框的画的示意图。其中，每一幅画有：画的示意图。其中，每一幅画有：图图7-6 两幅带画框的画示意图两幅带画框的画示意图l 外边距（上、右、下、左）；外边距（上、右、下、左）；l 内边距（上、右、下、左）；内边距（上、右、下、左）；l 边框：画框；边框：画框；l 内容：画的本身（宽、高）。内容：画的本身（宽、高）。【注意】【注意】画框与画框之间的距离为外边距。画框与画框之间的距离为外边距。盒子模型的重要性：盒子模型是盒子模型的重要性：盒子模型是CSSCSS网页布局的基础，只有掌握网页布局的基础，只有掌握了盒子模型的各种规律和特征

18、，才可以更好地控制网页中各个元素所了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。呈现的效果。在在HTMLHTML文档中，每个元素（文档中，每个元素（elementelement）都有盒子模型，每一个元）都有盒子模型，每一个元素都是一个盒子，素都是一个盒子，a a元素、元素、divdiv元素、元素、spanspan元素、元素、imgimg元素也是。另外的元素也是。另外的元素有语义，不要当成盒子用。元素有语义，不要当成盒子用。所以说在所以说在WebWeb世界里（特别是页面布局），盒子模型无处不在。世界里（特别是页面布局），盒子模型无处不在。因为网页是以长方形为单位渲染页面

19、的。因为网页是以长方形为单位渲染页面的。CSSCSS盒子模型本质上是一个盒子，封装周围的盒子模型本质上是一个盒子，封装周围的HTMLHTML元素，它包括：元素，它包括：边距、边框、填充和实际内容。盒子模型允许我们在其他元素和周围元边距、边框、填充和实际内容。盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素。素边框之间的空间放置元素。我们将上面的一幅带画框的画抽象为一个盒子。我们将上面的一幅带画框的画抽象为一个盒子。首先我们分析一下盒子的构成。首先我们分析一下盒子的构成。CSS CSS中，中，Box ModelBox Model叫盒子模型（或框模型），盒子模型规定了元素叫盒子模型（或框

20、模型），盒子模型规定了元素框处理元素内容（框处理元素内容（element contentelement content）、内边距（）、内边距（paddingpadding）、边框（）、边框（borderborder）和外边距（和外边距（marginmargin）的方式。）的方式。图图7-77-7是抽象出来的盒子模型图示。是抽象出来的盒子模型图示。图图7-7 盒子模型图示盒子模型图示 【说明】【说明】图图7-77-7中，由内而外依次是元素内容（中，由内而外依次是元素内容（contentcontent）、内边）、内边矩（矩（padding-toppadding-top、padding-rightp

21、adding-right、padding-bottompadding-bottom、padding-leftpadding-left）、边框）、边框（border-topborder-top、border-rightborder-right、border-bottomborder-bottom、border-leftborder-left）和外边距）和外边距（margin-topmargin-top、margin-rightmargin-right、margin-bottommargin-bottom、margin-leftmargin-left）。）。内边距、边框和外边距可以应用于一个元素的

22、所有边，也可以应内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。用负值的外边距。图图7-8 代码实现的盒子模型代码实现的盒子模型 【提示】【提示】padding padding、borderborder、marginmargin都是可选的，默认值为都是可选的，默认值为0 0，但是浏，但是浏览器会自行设置元素的览器会自行设置元素的marginmargin和和paddingpadding，一些元素是默认带有，一些元素是默认带有paddingpadding的

23、，的，通过在通过在CSSCSS样式表中如下设置来覆盖浏览器样式。样式表中如下设置来覆盖浏览器样式。*margin:0px;padding:0px;margin:0px;padding:0px;【注意】【注意】这里的这里的*表示所有元素，但是这样性能不好，建议依次表示所有元素，但是这样性能不好，建议依次列出常用的元素来设置。即：列出常用的元素来设置。即：*的效率不高，一般采用并集选择器罗的效率不高，一般采用并集选择器罗列所有的标签。列所有的标签。图图7-87-8就是盒子模型的组成部分，网页中所有的元素和对象都是由就是盒子模型的组成部分，网页中所有的元素和对象都是由图图7-87-8所示的基本结构组

24、成。所示的基本结构组成。理解了盒子模型的结构后，要想随心所欲地控制页面中每个盒子理解了盒子模型的结构后，要想随心所欲地控制页面中每个盒子的样式，还需要掌握盒子模型的相关属性，接下来我们就对盒子模型的样式，还需要掌握盒子模型的相关属性，接下来我们就对盒子模型的相关属性进行详细讲解。的相关属性进行详细讲解。7.2.2 7.2.2 盒子模型的组成属性盒子模型的组成属性一、边框属性一、边框属性 为了分割页面中不同的盒子，常常需要给元素设置边框效果，在为了分割页面中不同的盒子，常常需要给元素设置边框效果，在CSSCSS中中边框属性包括边框样式属性（边框属性包括边框样式属性（border-stylebor

25、der-style）、边框宽度属性（）、边框宽度属性（border-widthborder-width）、）、边框颜色属性（边框颜色属性（border-colorborder-color）。）。1 1设置边框样式（设置边框样式（border-styleborder-style）边框样式用于定义页面中边框的风格，常用属性值如下。边框样式用于定义页面中边框的风格，常用属性值如下。l none none：没有边框即忽略所有边框的宽度（默认值）。：没有边框即忽略所有边框的宽度（默认值）。l solid solid：边框为单实线。：边框为单实线。l dashed dashed：边框为虚线。：边框为虚线。

26、l dotted dotted：边框为点线。：边框为点线。l double double：边框为双实线。：边框为双实线。使用使用border-styleborder-style属性综合设置四边样式时，必须按属性综合设置四边样式时，必须按“上、右、下、上、右、下、左左”的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下个值为上下/左右，左右，3 3个值为上个值为上/左右左右/下。下。图图7-97-9所示的就是给盒子分别指定双实线、单实线、虚线、点线后所示的就是给盒子分别指定双实线、单实线、虚线、点线后的边框效果。的边框效果。

27、图图7-9 设置边框样式设置边框样式2 2设置边框宽度（设置边框宽度（border-widthborder-width）设置边框宽度的方法如下。设置边框宽度的方法如下。l borer-top-width borer-top-width：上边框宽度。：上边框宽度。l borer-right-width borer-right-width：右边框宽度。：右边框宽度。l borer-bottom-width borer-bottom-width：下边框宽度。：下边框宽度。l borer-left-width borer-left-width：左边框宽度。：左边框宽度。l borer-width bo

28、rer-width：上边框宽度：上边框宽度 右边框宽度右边框宽度 下边框宽度下边框宽度 左边框宽度左边框宽度。综合设置四边宽度必须按综合设置四边宽度必须按“上、右、下、左上、右、下、左”的顺时针顺序采用的顺时针顺序采用值复制，即一个值为四边，两个值为上下值复制，即一个值为四边，两个值为上下/左右，左右，3 3个值为上个值为上/左右左右/下。下。图图7-107-10所示的就是给段落文本同时设置边框宽度和样式的效果图。所示的就是给段落文本同时设置边框宽度和样式的效果图。图图7-10 设置边框宽度设置边框宽度3 3设置边框颜色（设置边框颜色（border-colorborder-color）设置边框

29、颜色的方法如下。设置边框颜色的方法如下。l border-top-color border-top-color：上边框颜色。：上边框颜色。l border-right-color border-right-color：右边框颜色。：右边框颜色。l border-bottom-color border-bottom-color：下边框颜色。：下边框颜色。l border-left-color border-left-color：左边框颜色。：左边框颜色。l border-color border-color：上边框颜色：上边框颜色 右边框颜色右边框颜色 下边框颜色下边框颜色 左边框颜色左边框颜色

30、。其取值可为预定义的颜色值、其取值可为预定义的颜色值、#十六进制、十六进制、rgb(r,g,b)rgb(r,g,b)或或rgb(r%,g%,b%)rgb(r%,g%,b%)，实际工作中最常用的是实际工作中最常用的是#十六进制。十六进制。边框的默认颜色为元素本身的文本颜色，对于没有文本的元素，例边框的默认颜色为元素本身的文本颜色，对于没有文本的元素，例如只包含图像的表格，其默认边框颜色为父元素的文本颜色。如只包含图像的表格，其默认边框颜色为父元素的文本颜色。综合设置四边颜色必须按综合设置四边颜色必须按“上、右、下、左上、右、下、左”的顺时针顺序采用值的顺时针顺序采用值复制，即一个值为四边，两个值

31、为上下复制，即一个值为四边，两个值为上下/左右，左右，3 3个值为上个值为上/左右左右/下。下。总结：能够用一个属性定义元素的多种样式，这种属性在总结：能够用一个属性定义元素的多种样式，这种属性在CSSCSS中中称之为复合属性。称之为复合属性。常用的复合属性有常用的复合属性有fontfont、borderborder、marginmargin、paddingpadding和和backgroundbackground等。等。实际工作中常使用复合属性，它可以简化代码，提高页面的运行实际工作中常使用复合属性，它可以简化代码，提高页面的运行速度，但是如果只有一项值，最好不要应用复合属性，以免样式不被速

32、度，但是如果只有一项值，最好不要应用复合属性，以免样式不被兼容。兼容。图图7-11 设置边框宽度设置边框宽度二、内边距、外边距属性二、内边距、外边距属性1 1内边距属性内边距属性 为了调整内容在盒子中的显示位置，常常需要给元素设置内边为了调整内容在盒子中的显示位置，常常需要给元素设置内边距，所谓内边距指的是元素内容与边框之间的距离，也常常称为内距，所谓内边距指的是元素内容与边框之间的距离，也常常称为内填充。填充。在在CSSCSS中中paddingpadding属性用于设置内边距，同边框属性属性用于设置内边距，同边框属性borderborder一样，一样，paddingpadding也是复合属性

33、，其相关设置如下。也是复合属性，其相关设置如下。l padding-toppadding-top：上边距。：上边距。l padding-rightpadding-right：右边距。：右边距。l padding-bottompadding-bottom：下边距。：下边距。l padding-leftpadding-left：左边距。：左边距。l paddingpadding：上边距：上边距 右边距右边距 下边距下边距 左边距左边距。在上面的设置中，在上面的设置中，paddingpadding相关属性的取值可为相关属性的取值可为autoauto自动（默认值）、自动（默认值）、不同单位的数值、相对

34、于父元素（或浏览器）宽度的百分比不同单位的数值、相对于父元素（或浏览器）宽度的百分比%，实际工，实际工作中最常用的是像素值作中最常用的是像素值pxpx，不允许使用负值。，不允许使用负值。同边框相关属性一样，使用复合属性同边框相关属性一样，使用复合属性paddingpadding定义内边距时，必须按定义内边距时，必须按“上、右、下、左上、右、下、左”的顺时针顺序采用值复制：一个值为四边、两个值的顺时针顺序采用值复制：一个值为四边、两个值为上下为上下/左右，左右，3 3个值为上个值为上/左右左右/下。下。使用使用paddingpadding相关属性设置图像和段落的内边距，其中段落内边距使相关属性设

35、置图像和段落的内边距，其中段落内边距使用用%数值。数值。由于段落的内边距设置为了由于段落的内边距设置为了%数值，当拖动浏览器窗口改变其宽度数值，当拖动浏览器窗口改变其宽度时，段落的内边距会随之发生变化（这时时，段落的内边距会随之发生变化（这时标记的父元素为标记的父元素为）。）。图图7-12 设置内边距设置内边距2 2外边距属性值外边距属性值 网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距，所谓外边距指的是元素合理地布局网页，就需要为盒子设置外边距，所谓外边距指的是元素边框与相邻元素之间的

36、距离。边框与相邻元素之间的距离。在在CSSCSS中中marginmargin属性用于设置外边距，它是一个复合属性，与内属性用于设置外边距，它是一个复合属性，与内边距边距paddingpadding的用法类似，设置外边距的方法如下。的用法类似，设置外边距的方法如下。l margin-top margin-top：上边距。：上边距。l margin-right margin-right：右边距。：右边距。l margin-bottom margin-bottom：下边距。：下边距。l margin-left margin-left：上边距。：上边距。l margin margin：上边距：上边距

37、右边距右边距 下边距下边距 左边距左边距。marginmargin相关属性的值，以及复合属性相关属性的值，以及复合属性marginmargin取取1 1至至4 4个值的情况与个值的情况与paddingpadding相同。相同。但是外边距可以使用负值，使相邻元素重叠，在后面的课程中将但是外边距可以使用负值，使相邻元素重叠，在后面的课程中将详细介绍外边距取负值的情况。详细介绍外边距取负值的情况。在上面的案例中使用浮动属性在上面的案例中使用浮动属性floatfloat使图像居左，同时设置图像的使图像居左，同时设置图像的右外边距和下外边距，使图像和文本之间拉开一定的距离，实现常见右外边距和下外边距，使

38、图像和文本之间拉开一定的距离，实现常见的排版效果。的排版效果。图图7-13 设置外边距设置外边距三、背景属性三、背景属性 背景属性的重要性：网页能通过背景图像给人留下第一印象，如背景属性的重要性：网页能通过背景图像给人留下第一印象，如节日题材的网站一般采用喜庆祥和的图片来突出效果，所以在网页设节日题材的网站一般采用喜庆祥和的图片来突出效果，所以在网页设计中，控制背景颜色和背景图像是一个很重要的步骤。计中，控制背景颜色和背景图像是一个很重要的步骤。1 1背景颜色背景颜色 网页元素的背景颜色使用网页元素的背景颜色使用background-colorbackground-color属性来设置，其属性

39、值属性来设置，其属性值与文本颜色的取值一样，可使用预定义的颜色、十六进制与文本颜色的取值一样，可使用预定义的颜色、十六进制#RRGGBB#RRGGBB、RGBRGB代码代码rgb(r,g,b)rgb(r,g,b)，默认为，默认为transparenttransparent透明，即子元素会显示其父元素透明，即子元素会显示其父元素的背景。的背景。图图7-14 设置元素背景颜色设置元素背景颜色2 2背景图像背景图像 背景不仅可以设置为某种颜色，还可以将图像作为网页元素的背背景不仅可以设置为某种颜色，还可以将图像作为网页元素的背景，通过景，通过background-imagebackground-im

40、age属性实现。属性实现。运行例程代码，得到效果如图运行例程代码，得到效果如图7-157-15所示。所示。图图7-15 设置网页元素的背景图像设置网页元素的背景图像3 3背景图像平铺背景图像平铺 默认情况下，背景图像会自动向水平和竖直两个方向平铺，如果默认情况下，背景图像会自动向水平和竖直两个方向平铺，如果不希望图像平铺，或者只沿着一个方向平铺，可以通过不希望图像平铺，或者只沿着一个方向平铺，可以通过background-background-repeatrepeat属性来控制，具体使用方法如下。属性来控制，具体使用方法如下。l repeat repeat：沿水平和竖直两个方向平铺（默认值）。

41、：沿水平和竖直两个方向平铺（默认值）。l no-repeat no-repeat：不平铺（图像位于元素的左上角，只显示一次）。：不平铺（图像位于元素的左上角，只显示一次）。l repeat-x repeat-x：只沿水平方向平铺。：只沿水平方向平铺。l repeat-y repeat-y：只沿竖直方向平铺。：只沿竖直方向平铺。运行例程代码，得到效果如图运行例程代码，得到效果如图7-167-16所示。所示。图图7-16 设置网页元素背景图像平铺设置网页元素背景图像平铺4 4背景图像位置背景图像位置 如果希望背景图像出现在指定位置，就需要另一个如果希望背景图像出现在指定位置，就需要另一个CSSCS

42、S属性属性background-positionbackground-position，设置背景图像的位置。，设置背景图像的位置。在在CSSCSS中，中，background-positionbackground-position属性的值通常设置为两个，中间用属性的值通常设置为两个，中间用空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标，例如空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标，例如上面的上面的“right bottom”“right bottom”，默认为，默认为“0 0”“0 0”或或“top left”“top left”，即背景图像位，即背景图像位于元素的左上角

43、。于元素的左上角。background-positionbackground-position属性的取值有多种，具体如下。属性的取值有多种，具体如下。（1 1）使用不同单位（最常用的是像素）使用不同单位（最常用的是像素pxpx）的数值：直接设置图像左）的数值：直接设置图像左上角在元素中的坐标，例如上角在元素中的坐标，例如background-position:20px 20pxbackground-position:20px 20px。（2 2）使用预定义的关键字：指定背景图像在元素中的对齐方式。）使用预定义的关键字：指定背景图像在元素中的对齐方式。l 水平方向值：水平方向值：leftleft

44、、centercenter、rightright。l 垂直方向值：垂直方向值：toptop、centercenter、bottombottom。（3 3）使用百分比：按背景图像和元素的指定点对齐。）使用百分比：按背景图像和元素的指定点对齐。l 0%0%0%0%表示图像左上角与元素的左上角对齐。表示图像左上角与元素的左上角对齐。l 50%50%50%50%表示图像表示图像50%50%50%50%中心点与元素中心点与元素50%50%50%50%的中心点对齐。的中心点对齐。l 20%30%20%30%表示图像表示图像20%30%20%30%的点与元素的点与元素20%30%20%30%的点对齐。的点对

45、齐。l 100%100%100%100%表示图像右下角与元素的右下角对齐，而不是图像充表示图像右下角与元素的右下角对齐，而不是图像充满元素。满元素。运行例程代码，得到效果如图运行例程代码，得到效果如图7-177-17所示。所示。图图7-17 设置元素背景图像位置设置元素背景图像位置5 5背景图像固定背景图像固定 在网页上设置背景图像时，随着页面滚动条的移动，背景图像也在网页上设置背景图像时，随着页面滚动条的移动，背景图像也会跟着一起移动。会跟着一起移动。如果希望背景图像固定在屏幕上，不随着页面元素滚动，可以使如果希望背景图像固定在屏幕上，不随着页面元素滚动，可以使用用background-at

46、tachmentbackground-attachment属性来设置，其属性值如下。属性来设置，其属性值如下。l scroll scroll：图像随页面元素一起滚动（默认值）。：图像随页面元素一起滚动（默认值）。l fixed fixed：图像固定在屏幕上，不随页面元素滚动。：图像固定在屏幕上，不随页面元素滚动。运行例程代码，得到效果如图运行例程代码，得到效果如图7-187-18所示。所示。图图7-18 设置元素背景图像固定设置元素背景图像固定7.2.3 7.2.3 盒子的宽度和高度盒子的宽度和高度 网页是由多个盒子排列而成的，每个盒子都有固定的大小，在网页是由多个盒子排列而成的，每个盒子都有

47、固定的大小，在CSSCSS中使用宽度属性中使用宽度属性widthwidth和高度属性和高度属性heightheight可以对盒子的大小进行控制。可以对盒子的大小进行控制。CSS CSS规范的盒子模型的总宽度和总高度的计算原则是：规范的盒子模型的总宽度和总高度的计算原则是：盒子的总宽度盒子的总宽度=width +=width +左右内边距之和左右内边距之和+左右边框宽度之和左右边框宽度之和+左右外边距左右外边距盒子的总高度盒子的总高度=height+=height+上下内边距之和上下内边距之和+上下边框宽度之和上下边框宽度之和+上下外边距上下外边距 7.2.4 7.2.4 盒子外边距合并问题盒子

48、外边距合并问题 margin margin属性是指的外边距，控制属性是指的外边距，控制marginmargin盒子和盒子之间的距离，盒子和盒子之间的距离，可理解为搞可理解为搞“外交外交”的。的。padding padding属性是指的内边距，可理解为搞属性是指的内边距，可理解为搞“内政内政”的。的。一、水平一、水平marginmargin（外边距）能够代数相加减（行内元素）（外边距）能够代数相加减（行内元素）运行例程代码，得到效果如图运行例程代码，得到效果如图7-197-19所示。所示。从以上代码和浏览器效果图看，从以上代码和浏览器效果图看，marginmargin值在水平方向上能够相加值在水

49、平方向上能够相加（代数相加，计算代数和）。（代数相加，计算代数和）。一般不给出行内元素一般不给出行内元素margin-topmargin-top、margin-bottom margin-bottom（上外边距、（上外边距、下外边距）。下外边距）。margin margin值为水平方向代数和：值为水平方向代数和：l margin-right:60pxmargin-right:60pxl margin-left:30pxmargin-left:30px 所以，所以，marginmargin值值=60px+30px=90px=60px+30px=90px。图图7-19 水平水平margin能够代数

50、相加减能够代数相加减二、垂直二、垂直marginmargin（外边距）有塌陷现象（块级元素）（外边距）有塌陷现象（块级元素）运行例程代码，得到效果如图运行例程代码，得到效果如图7-207-20所示。所示。从以上代码和浏览器效果图看，从以上代码和浏览器效果图看，marginmargin值在垂直方向上不能相加，值在垂直方向上不能相加，而是有塌陷现象存在。而是有塌陷现象存在。以数的绝对值大的为准，数小的无效。由于以数的绝对值大的为准，数小的无效。由于50px50px10px10px，上下间，上下间隙以隙以50px50px为准，为准，10px10px无效。无效。所以，垂直方向所以，垂直方向margin