HTML5 CSS3 JavaScript第4章ppt课件.pptx

《HTML5 CSS3 JavaScript第4章ppt课件.pptx》由会员分享，可在线阅读，更多相关《HTML5 CSS3 JavaScript第4章ppt课件.pptx（91页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、HTML5 CSS3 JavaScript第4章教学课件第第4章章设计网网页页面面4.1 引入盒模型盒模型4.2 使用CSSCSS浮浮动与定位定位4.3 设置显示示与隐藏藏了解盒模型盒模型结构构与z-indexz-index属性属性理解CSSCSS定位的区定位的区别与应用用场景景熟悉控制控制显示与示与隐藏的相关属性藏的相关属性引言一个完整美观的静态网页，主要是由HTML标签与具有美化功能的CSS构成，HTML标签创建网页的基本布局，而CSS相当于为网页“换上美丽大方的衣服”。CSS可以提高网页的美观度和速度，能更好地控制页面布局。本章将重点介绍盒模型的应用，显示与隐藏以及定位的使用。这些CSS

2、属性的应用提升了网页的页面效果，使其变得更多样化。4.1引入盒模型引入盒模型盒模型内容概述案例新闻列表border属性padding属性cursor属性怪异盒模型margin属性4.1 引入盒模型4.1.1 盒模型内容概述在CSS中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是使用CSS实现准确布局，处理元素排列的关键。盒模型（Box Model）主要用于CSS设计页面布局，它规定网页元素如何显示以及元素间的相互关系，开发者可用CSS定义元素拥有像盒子一样的外形和平行空间，合理使用盒模型进行网页布局的设计，能很大程度上提升网页的美观度。4.1 引入盒模型4.1

3、.1 盒模型内容概述盒模型结构主要由content、padding、border和margin4个部分构成，其结构如图所示。盒模型结构主要由content、padding、border和margin4个部分构成，其结构如图所示。盒模型的content内容指块元素（“盒子”）里面的包含的文字、图片、超链接、音频、视频等，由CSS的宽和高两个属性决定。4.1 引入盒模型4.1.2 padding属性padding属性也称为填充属性，控制元素所有四条边的内边距区域，一个元素的内边距区域指的是其内容与其边框之间的空间。padding属性可调整内容在容器中的位置关系，它的值是额外加在元素原有大小之上的，

4、会把元素撑大。若想使元素保持原有的大小，则需要删除额外添加的padding。4.1 引入盒模型4.1.2 padding属性padding属性是其相关属性padding-top、padding-bottom、padding-left和padding-right的简写，padding的相关属性具体说明如表所示。相关属性属性属性说明明padding在一个声明中设置所有内边距的属性，属性值通常为像素值或百分比padding-top设置元素的上内边距padding-bottom设置元素的下内边距padding-left设置元素的左内边距padding-right设置元素的右内边距4.1 引入盒模型4.

5、1.2 padding属性padding属性的值可以通过复合写法有多种设置方式，其基本语法格式如下。语法格式padding:上内边距 右内边距 下内边距 左内边距padding:上内边距 左右内边距 下内边距padding:上下内边距 左右内边距padding:上下左右内边距4.1 引入盒模型4.1.2 padding属性padding属性的注意事项padding属性会出现撑开父元素“盒子”的情况。撑开父元素是指父元素跟随子元素的padding值一起变大。子元素不设置宽度而是继承父元素的宽度，此时为子元素设置padding的值，若子元素整体宽度未超过父元素，则不会撑开父元素；若子元素整体宽度超

6、过父元素，则会撑开父元素。padding属性的值只对内容产生效果，而不会对背景图有任何效果。4.1 引入盒模型4.1.3 border属性border属性可定义一个元素的边框宽度、样式和颜色。在CSS样式中，border属性是其3个相关属性border-width、border-style和border-color的简写。相关属性属性属性说明明border-width设置边框宽度，属性值为数值，常用单位为像素（px）border-style设置边框线样式，属性值有none（无边框）、solid（实线）、dashed（虚线）、dotted（点状）和double（双线）border-color设置

7、边框颜色，属性值可以是颜色的英文单词或十六进制值或RGB值4.1 引入盒模型4.1.3 border属性3个边框属性可连写，连写顺序为边框宽度（border-width）、边框线样式（border-style）和边框颜色（border-color），在进行边框样式的设置时，使用连写格式可使开发者编写代码更快捷，代码可读性也更好。border属性的语法格式如下。语法格式border:border-width border-style border-color;例：border:1px solid#aaa;4.1 引入盒模型4.1.4 margin属性margin属性定义元素周围的空间，即元素与元

8、素之间的距离。margin属性是其相关属性margin-top、margin-bottom、margin-left和margin-right的简写。相关属性属性属性说明明margin在一个声明中设置所有外边距的属性，属性值通常为像素值或百分比，可以取负值margin-top设置元素的上外边距margin-bottom设置元素的下外边距margin-left设置元素的左外边距margin-right设置元素的右外边距它有一个属性值auto，可让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中,代码为 margin:auto;或margin:0 auto;/使元素居中。4

9、.1 引入盒模型4.1.4 margin属性margin属性的值可以通过复合写法有多种设置方式，其基本语法格式如下。语法格式margin:上外边距 右外边距 下外边距 左外边距margin:上外边距 左右外边距 下外边距margin:上下外边距 左右外边距margin:上下左右外边距4.1 引入盒模型4.1.4 margin属性margin属性的注意事项1.margin属性上下重叠问题两个相邻块元素同时添加上下外边距时，会出现外边距重叠的问题。例如前一个块元素div.box1添加margin-bottom:50px，后一个块元素div.box2添加margin-top:10px，则这两个块元素

10、之间的距离为50px。发生这类情况时，结果取决于哪个元素设置的margin值比较大，就显示哪个元素的margin值。4.1 引入盒模型4.1.4 margin属性margin属性的注意事项2.margin属性外边距塌陷问题当父元素没有边框时，子元素添加margin-top属性之后，会带着父元素一起下沉，这便是margin属性外边距塌陷问题，它只会出现在嵌套结构中，且只有margin-top会有这类问题，其他三个方向是没有外边距塌陷问题的。有以下3种方式可解决这个问题。为父元素添加overflow属性。将overflow属性值设置为hidden，即可解决外边距塌陷问题，推荐使用。代码为 over

11、flow:hidden;为父元素添加一个边框。边框颜色推荐使用透明色，这样不会影响之前的整体效果。代码为 border:1px solid transparent;c.为父元素添加padding-top属性。这种方式需要重新计算高度值，从而保证父元素“盒子”大小，不推荐使用。4.1 引入盒模型4.1.4 margin属性结合盒模型的content属性、padding属性、border属性和margin属性，演示盒模型的结构。演示说明有志者事竟成学海无涯苦做舟主体代码 例4.1/*为两个“盒子”统一设置宽高和外边距，上下外边距为10px，auto值使其居中*/.box1,.box2width:1

12、50px;height:50px;margin:10pxauto;margin:10pxauto;/*设置边框、背景颜色，四边内边距为10px，填充“盒子”宽度*/.box1border:1pxsolid#6495ef;border:1pxsolid#6495ef;background-color:#CC9999;padding:10px;padding:10px;/*设置边框、背景颜色，四边内边距为30px，填充“盒子”宽度*/.box2border:1pxdashed#2f4f4f;border:1pxdashed#2f4f4f;background-color:#FF9999;paddi

13、ng:30px;padding:30px;CSS代码 例4.14.1 引入盒模型4.1.4 margin属性结合盒模型的content属性、padding属性、border属性和margin属性，演示盒模型的结构。盒模型结构的运行效果如下。演示说明4.1 引入盒模型4.1.5 怪异盒模型1.区别两种盒模型的区别在于，盒子的内容宽高的取值范围不一样。盒模型分为标准盒模型和怪异盒模型（也称为IE6盒模型），两者都是由content内容、padding内边距、border边框和margin外边距4个部分构成。在标准盒模型的情况下，盒子总宽高的值为“width/height（内容宽度）+padding

14、（内边距）+border（边框）+margin（外边距）”，其中内容宽高为content部分的width/height。在怪异盒模型的情况下，盒子的总宽高的值为“width/height（内容宽度）+margin（外边距）”，其中内容宽高为content部分的width/height+padding（内边距）+border（边框）。4.1 引入盒模型4.1.5 怪异盒模型2.模型间的转换可采用CSS3的box-sizing属性对标准盒模型和怪异盒模型进行转换，box-sizing属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距（padding）和边框（border）等。bo

15、x-sizing属性值具体说明如表所示。属性属性值说明明content-box默认值，计算一个元素的总宽度和总高度，需要加上padding内边距和border边框等，即默认采用标准盒模型border-box元素内容的宽度和高度中已包含了padding内边距和border边框，即默认采用怪异盒模型inherit指定box-sizing属性的值，应该从父元素继承4.1 引入盒模型4.1.6 cursor属性cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。常用属性值如表所示。属性属性值说明明default默认光标，通常是一个箭头pointer光标呈现为指示链接的指针（一只手）t

16、ext此光标指示文本，呈现为文本竖标help此光标指示可用的帮助，通常是一个问号或一个气球wait此光标指示程序正忙，通常是一只表或沙漏move此光标指示某对象可被移动grab此光标指示某对象可被抓取，呈现为一个手指4.1 引入盒模型4.1.6 cursor属性续表属性属性值说明明grabbing此光标指示某对象正在被抓取中，呈现为一个抓拳crosshair光标呈现为十字线zoom-in此光标指示某对象可被放大，呈现为一个放大镜zoom-out此光标指示某对象可被缩小，呈现为一个缩小镜4.1 引入盒模型4.1.7 案例图书促销活动本实例是利用盒模型仿照图书购物平台制作一个活动专区的页面。主要由

17、块元素、无序列表、超链接和图片标签构成，图书促销活动的页面结构简图如图所示。图书活动专区linktype=text/cssrel=stylesheethref=box.css!-!-每个项目列表中有一个超链接-图书、童书代码实现4.1 引入盒模型4.1.7 案例图书促销活动主体代码 例4.2!-!-4.1 引入盒模型4.1.7 案例图书促销活动代码实现在上述主体代码中，页面主体主要分为3个部分，左半部分是块元素中嵌套无序列表，共有10个项目列表，每个列表项目中有1个超链接，中间部分是块元素中嵌入2张图片，右半部分是块元素中嵌入1张图片。#mainmargin:20pxauto;/*margin

18、:20pxauto;/*设置上下外置上下外边距距为20px20px，左右左右处于居中位置于居中位置*/*/border:1pxsolidrgb(232,232,232);/*border:1pxsolidrgb(232,232,232);/*为父元素父元素设置置边框框*/*/*/*为3 3个部分个部分设置左浮置左浮动*/*/.left,.banner,.rightfloat:left;float:left;/*为左半部分的导航栏设置宽高和背景颜色*/#main.leftwidth:200px;height:490px;background-color:rgb(115,84,58);.leftu

19、llilist-style:none;/*list-style:none;/*取消取消项目列表目列表样式式*/*/width:200px;height:40px;line-height:40px;/*line-height:40px;/*高与行高的高与行高的值相同，可使文本内相同，可使文本内容居中容居中*/*/margin-top:8px;/*margin-top:8px;/*为每个每个项目列表目列表设置上外置上外边距距*/*/代码实现4.1 引入盒模型4.1.7 案例图书促销活动CSS部分代码 例4.2.leftadisplay:inline-block;/*display:inline-b

20、lock;/*超超链接接转化化为行内行内块元素元素*/*/width:180px;width:180px;height:40px;color:white;padding-left:20px;/*padding-left:20px;/*为超超链接接设置左内置左内边距，增加距，增加宽度度*/*/text-decoration:none;/*text-decoration:none;/*取消超取消超链接的文本修接的文本修饰*/*/*/*鼠鼠标移移动到超到超链接接时的状的状态*/*/.lefta:hoverwidth:200px;width:200px;height:40px;background-c

21、olor:#CC9999;cursor:pointer;/*cursor:pointer;/*设置光置光标形状形状为指示指示链接的指接的指针（一（一只小手）只小手）*/*/*设置广告部分中的两张图片*/.img1,.img2display:block;/*display:block;/*将将转化化为块元素元素*/*/*设置右半部分宽度*/.rightwidth:198px;4.1 引入盒模型4.1.7 案例图书促销活动代码实现在上述CSS代码中，首先，利用通用选择器设置清除页面默认边距，接着使用margin属性为父容器整个页面块设置上下外边距，auto属性值使其左右处于居中位置，并设置宽度、高

22、度和背景颜色，以及添加边框样式。然后将3个子元素块设置向左浮动，为左半部分的块元素设置基本样式，无序列表取消项目列表样式，每个项目列表设置上外边距，并将里面的超链接转化为行内块元素，设置左内边距，增加宽度，取消超链接的文本修饰，设置鼠标移动到超链接时的样式。最后为中间部分和右半部分的图片设置相应的样式。本节小结本节内容讲解了关于盒模型的结构构成，以及padding内边距、border边框和margin外边距属性的相关内容，并利用盒模型制作一个图书活动专区页面。通过本节的学习，希望读者可以利用盒模型的结构设计更优美的网页页面。4.2使用使用CSS浮浮动与定位与定位CSS浮动案例祖国风光推荐定位的

23、概述清除浮动z-index属性absolute绝对定位relative相对定位fixed固定定位4.2 使用CSS浮动与定位4.2.1 CSS浮动CSS浮动是网页布局中重要的组成元素。“浮”指元素可以脱离文档流，漂浮在网页上面；“动”指元素可以偏移位置，移动到指定位置。浮动的本质是让块级元素在同一行显示，脱离文档流，不占用原来的位置。文档流是元素在页面中出现的先后顺序，即元素在窗体中自上而下按行排列，并在每行中按从左到右的顺序排放。4.2 使用CSS浮动与定位4.2.1 CSS浮动块元素的浮动是在CSS中使用float属性进行设置的，设置浮动之后，元素会按一个指定的方向移动，直至到达父容器的边

24、界或另一个浮动元素才停止。float属性有none、left和right三个属性值，其属性值的具体说明如表所示。属性属性值说明明nonenone值为不浮动（默认值），表示对元素不进行浮动操作，元素处于正常文档流leftleft值为左浮动，表示对元素进行左浮动，元素会沿着父容器靠左排列并脱离文档流rightright值为右浮动，表示对元素进行右浮动，元素会沿着父容器靠右排列并脱离文档流float属性4.2 使用CSS浮动与定位4.2.1 CSS浮动通过浮动属性将6个带有文字内容的块元素分别实现左右浮动。演示说明1.北风吹白云2.岁暮风动地3.君看一叶舟4.春风且莫定5.细草微风岸6.窗外正风雪主

25、体代码 例4.3/*/*为父容器父容器设置置宽度度为bodybody的的100%100%，由于，由于样式式优先先级idid选择器器 标签选择器，父元素器，父元素宽高不受高不受标签选择器影响器影响*/*/#boxwidth:100%;width:100%;/*为6个子元素块分别设置宽高、字体大小和右外边距*/divwidth:115px;height:50px;font-size:18px;margin-right:10px;/*/*为前前3 3个个块元素元素设置背景置背景颜色和左浮色和左浮动*/*/.box1,.box2,.box3background-color:#acbe45;float:

26、left;float:left;/*/*为后后3 3个个块元素元素设置背景置背景颜色和右浮色和右浮动*/*/.box4,.box5,.box6background-color:#a9b7ce;float:right;float:right;CSS代码 例4.34.2 使用CSS浮动与定位4.2.1 CSS浮动通过浮动属性将6个带有文字内容的块元素分别实现左右浮动。运行效果如图。演示说明4.2 使用CSS浮动与定位4.2.2 清除浮动float属性对元素进行浮动操作时，不会对之前的元素造成任何影响，但元素浮动脱离正常文档流会影响到后面元素的布局，导致发生错位。例如，在一个父元素“盒子”中，有2个

27、子元素自上而下排列，若为第1个子元素设置浮动，则第2个子元素会移动到第1个子元素的原有位置，而第1个子元素“浮”在第2个子元素上面。父元素未设置宽度和高度时，父元素的宽度和高度是由子元素决定的，因此，此时父元素的高度与第2个子元素的高度一样，相当于第1个子元素的那部分高度“消失”了，效果如图所示。4.2 使用CSS浮动与定位4.2.2 清除浮动由于元素浮动之后脱离正常标准流，影响到后面元素的布局，为了解决浮动带来的影响，可在CSS中通过clear属性来设置清除浮动的操作。clear属性用于清除浮动，有both、left和right这3个属性值，其属性值的具体说明如表所示。属性属性值说明明lef

28、tleft值用于清除左浮动rightright值用于清除右浮动bothboth值可以同时清除左右浮动clear属性4.2 使用CSS浮动与定位4.2.2 清除浮动清除浮动的方式1.为父容器设置一个固定高度如果父容器不设置高度，子元素浮动脱离文档流，会导致父容器和子元素不在同一个层面，父容器内没有任何内容，无法撑开。通过固定父容器高度，可以限制容器大小，不影响下面元素的位置，但不方便对内容进行扩展，在实际的大型应用开发中不建议使用此方式。4.2 使用CSS浮动与定位4.2.2 清除浮动清除浮动的方式2.为父容器添加一个overflow属性overflow属性设置值为hidden（对溢出内容进行修

29、剪）或scroll（对元素设置滚动条）的方式可以清除浮动带来的影响。但overflow属性会对溢出的元素进行隐藏或添加滚动条，在实际开发中不推荐使用此方式。4.2 使用CSS浮动与定位4.2.2 清除浮动清除浮动的方式3.父容器添加一个空标签在父容器中添加一个空标签.clear，再利用clear属性清除浮动，这种方式使得空标签保持在正常位置，同时父容器和空标签在同一个层面上，父容器会被空标签撑开，具体代码如下所示。.clearclear:both;.此种方式十分巧妙，但要多添加一个标签元素，使用不方便，不利于后期对代码的维护，因此不建议在实际开发中使用。4.2 使用CSS浮动与定位4.2.2

30、清除浮动清除浮动的方式4.使用伪元素（:after）清除浮动after伪元素是优化空标签方式的一种做法，在父容器中添加一个class类名（如clearfix），然后通过CSS中的content属性为HTML标签添加一个空内容，相当于添加一个空标签，默认是内联元素的特点，再通过display属性设置值为block，将其转化为块级元素的特点，然后通过清除浮动的方式撑开父容器。.clearfix:aftercontent:;display:block;clear:both;/*兼容IE浏览器*/.clearfix*zoom:1;此种方式易于后期维护，是实际开发中清除浮动的常用方式。4.2 使用CSS

31、浮动与定位4.2.3 定位的概述在CSS中，通过CSS定位可以实现网页元素的精确定位。定位可设置元素所处的位置，使其脱离标准流，改变当前位置。CSS定位和CSS浮动类似，也是控制网页布局的操作，CSS定位更加灵活，可以针对更多个性化的布局方案来使用。在设计网页布局时，灵活使用这两种布局方式，能够创建多种高级而精确的布局。4.2 使用CSS浮动与定位4.2.3 定位的概述在CSS中，position属性用来定义元素的定位模式，有4个常用属性值为static、relative、absolute和fixed，分别对应4种定位方式，即静态定位、相对定位、绝对定位和固定定位。static静态定位是CSS

32、定位的默认定位方式，position属性值为static，可将元素定位于静态位置，此时元素不会以任何特殊方式定位。静态定位的元素不受top、bottom、left和right位置属性的影响，始终根据页面的标准流进行定位。在默认状态下，任何元素都会以静态定位来确定位置。因此，不设置position定位属性时，元素会遵循默认值显示为静态位置。定位模式4.2 使用CSS浮动与定位4.2.3 定位的概述在网页中定义了元素的定位方式之后，并不能确定元素的具体位置，需要配合位置属性来精确设置定位元素的具体位置。位置属性共有4个，包括top、bottom、left和right。这4个位置属性可以取值为不同单

33、位（如px，mm，rems）的数值或百分比，位置属性的具体含义如表所示。位置属性位置属性位置属性说明明top顶部偏移量bottom底部偏移量left左侧偏移量right右侧偏移量4.2 使用CSS浮动与定位4.2.4 相对定位relative相对定位的元素是相对于其正常位置进行定位，position属性值为relative。相对定位的元素会以自身位置为基准设置位置，即根据left、right、top、bottom等位置属性在标准文档流中进行位置偏移。相对定位不会对其余内容进行调整来适应元素留下的任何空间，仍然占用原本的位置。4.2 使用CSS浮动与定位4.2.4 相对定位相对定位有以下3个特性

34、。相对于自身的初始位置来定位。元素位置发生偏移后，会占用原来的位置，之前的空间会被保留下来。层级提高，可以覆盖标准文档流中的元素及浮动元素。特性相对定位一般情况下很少单独使用，可以配合绝对定位使用，通常作为绝对定位的元素的父元素，而又不设置偏移量，也就是所谓的“子绝父相”。使用场景4.2 使用CSS浮动与定位4.2.4 相对定位利用3个块元素，其中一个元素进行相对定位，然后观察它们的位置变化。演示说明1.少年强，则国强2.天下兴亡匹夫有责3.为中华之崛起而读书主体代码 例4.4/*为三个元素块统一设置宽高*/divwidth:200px;height:50px;/*为每个元素块分别设置背景颜色

35、*/.box1background-color:#FFA07A;.box2background-color:#CC99CC;position:relative;/*position:relative;/*为第第2 2个元素个元素块设置相置相对定位定位*/*/left:100px;/*left:100px;/*根据左上角位置距离左根据左上角位置距离左侧偏移偏移100px,100px,往右移往右移动*/*/top:80px;/*top:80px;/*根据左上角位置距离根据左上角位置距离顶部偏移部偏移80px,80px,往下移往下移动*/*/.box3background-color:#6699FF

36、;CSS代码 例4.44.2 使用CSS浮动与定位4.2.4 相对定位利用3个块元素，其中一个元素进行相对定位，然后观察它们的位置变化。运行效果如图所示。演示说明相对定位的元素仍然在文档标准流中，占据原有的位置空间。元素设置相对定位时，位置属性是根据元素左上角进行位置偏移的。例如在这个示例中，元素首先根据左上角的位置距离左侧偏移100px（往右移动），然后距离顶部偏移80px（往下移动）。4.2 使用CSS浮动与定位4.2.5 绝对定位absolute绝对定位的元素是相对于最近的已定位的祖先元素进行定位，若祖先元素都没有定位，会按照文档主体（body）的左上角进行定位，并随页面滚动一起移动。绝

37、对定位的position属性值为absolute。绝对定位的元素会以最近的已定位的祖先元素为基准设置位置，即根据left、right、top、bottom等位置属性相对于祖先元素进行位置偏移，类似于坐标值定位。被设置了绝对定位的元素，在文档标准流中的位置会被删除，是不占据空间的。4.2 使用CSS浮动与定位4.2.5 绝对定位绝对定位有以下4个特性。绝对定位是相对于最近的已定位的祖先元素位置进行定位，如果祖先元素没有设置定位，则相对文档主体（body）的左上角来定位。元素位置发生偏移后，不会占用原来的位置。层级提高，可以覆盖标准文档流中的元素及浮动元素。设置绝对定位的元素脱离文档标准流。特性。

38、特性4.2 使用CSS浮动与定位4.2.5 绝对定位绝对定位一般情况下，可用于下拉菜单、弹出数字气泡、焦点图轮播、信息内容显示等场景。绝对定位可将元素定位到网页的正中心，具体实现代码如下。特性。使用场景#boxposition:absolute;/*为该元素设置绝对定位方式*/left:0;/*设置上下左右4个位置属性的值为0*/right:0;top:0;bottom:0;margin:auto;/*设置外边距值为auto*/4.2 使用CSS浮动与定位4.2.5 绝对定位在一个父元素块中有3个子块元素，父元素块用于设置相对定位，其中一个子元素块设置绝对定位，然后观察它们的位置变化。演示说明

39、1.位卑未敢忘忧国2.先天下之忧而忧3.以国家之务为己任主体代码 例4.5/*设置父元素*/#boxwidth:400px;height:200px;border:1pxsolid#666;background-color:#f5f6fa;position:relative;/*position:relative;/*为父元素父元素设置相置相对定位定位*/*/*为子元素块分别设置背景颜色*/.box1background-color:#cc9966;.box2background-color:#99cccc;position:absolute;/*position:absolute;/*为第第

40、2 2个元素个元素块设置置绝对定位定位*/*/right:120px;/*right:120px;/*根据父元素位置距离右根据父元素位置距离右侧偏移偏移120px120px*/*/bottom:50px;/*bottom:50px;/*根据父元素位置距离底部偏移根据父元素位置距离底部偏移50px*/50px*/.box3background-color:#99cc66;CSS代码 例4.54.2 使用CSS浮动与定位4.2.5 绝对定位在一个父元素块中有3个子块元素，父元素块用于设置相对定位，其中一个子元素块设置绝对定位，然后观察它们的位置变化。运行效果如图所示。演示说明绝对定位的元素不在文档

41、标准流中，不占据原有的位置空间。元素设置绝对定位时，位置属性是根据已定位的祖先元素进行位置偏移的。例如在这个示例中，类似于坐标值定位，元素首先在距离父元素右侧120px的位置进行偏移，然后在距离父元素底部50px的位置进行偏移。4.2 使用CSS浮动与定位4.2.6 固定定位fixed固定定位的元素是相对于浏览器窗口进行定位的，使用固定定位的元素不会因为浏览器窗口的滚动而移动。固定定位的position属性值为fixed。固定定位的元素会以浏览器窗口为基准设置位置，即根据left、right、top、bottom等位置属性相对于浏览器窗口进行位置偏移，即使滚动页面，它也始终位于同一位置。但是，

42、一旦被定位到浏览器窗口的可见视图之外，就不能被看见了。4.2 使用CSS浮动与定位4.2.6 固定定位固定定位有以下3个特性。相对浏览器窗口来定位。偏移量不会随滚动条的滚动而移动。不占用原来的位置空间。特性固定定位一般情况下，在网页中可用于窗口左右两边的固定广告、返回顶部图标、固定顶部导航栏等。使用场景4.2 使用CSS浮动与定位4.2.6 固定定位在一个父元素块中有2个子元素块，其中一个子元素块设置固定定位，然后观察它们的位置变化，具体代码如下。演示说明1.乐以天下，忧以天下2.砥砺前行，繁荣昌盛主体代码 例4.6/*设置父元素*/#boxwidth:300px;height:130px;b

43、ackground-color:#fof6fa;/*设置背景颜色*/border:1pxsolid#999;/*border:1pxsolid#999;/*设置置边框框*/*/*统一设置2个子元素的宽高*/.box1,.box2width:200px;height:50px;.box1background-color:#daaaf0;position:fixed;/*position:fixed;/*为第第1 1个子元素个子元素设置固定定位置固定定位*/*/right:10px;/*right:10px;/*距离距离浏览器窗口右器窗口右侧10px*/10px*/bottom:5px;/*bot

44、tom:5px;/*距离距离浏览器窗口底部器窗口底部5px*/5px*/.box2background-color:#f0afc1;CSS代码 例4.64.2 使用CSS浮动与定位4.2.6 固定定位在一个父元素块中有2个子元素块，其中一个子元素块设置固定定位，然后观察它们的位置变化。运行效果如图所示。演示说明固定定位的元素不会占据原有的位置空间。元素设置固定定位时，位置属性是根据浏览器窗口进行位置偏移的。例如在这个示例中，不论浏览器窗口大小如何变化，元素始终在距离浏览器窗口右侧10px的位置进行偏移，在距离浏览器窗口底部5px的位置进行偏移，位置始终不变。4.2 使用CSS浮动与定位4.2.

45、7 z-index属性z-index是针对网页显示中的一个特殊属性，显示器通常显示的是一个二维平面图案，用x轴和y轴来表示位置属性。为了表示三维立体的概念，在显示元素的上下层的叠加顺序引入了z-index属性来表示z轴（显示屏方向）的区别，从而表示一个元素在叠加顺序上的上下立体关系。z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index属性适用于具有定位元素的模式。当多个元素添加定位操作时，可能会出现叠加情况，此时可以使用z-index属性来确定定位元素在垂直于z轴上的层叠顺序。4.2 使用CSS浮动与定位4.2.7 z-index属性z

46、-index属性的属性值具体说明如表所示。属性属性值说明明auto默认值，堆叠顺序与父元素相等number（数值）设置元素的堆叠顺序，数值可为负数。z-index值较大的元素将叠加在z-index值较小的元素之上对于未指定z-index属性的定位对象，z-index值为正数的对象会在其之上，而z-index值为负数的对象在其之下。4.2 使用CSS浮动与定位4.2.8 案例-祖国风光推荐本实例是利用CSS浮动与定位制作一个祖国风景的推荐文案页面。主要由块元素、段落标签、图片标签和超链接构成，风景推荐文案的页面结构简图如图所示。4.2 使用CSS浮动与定位4.2.8 案例-祖国风光推荐代码实现祖

47、国风光推荐linktype=text/cssrel=stylesheet.css走进祖国壮美风光中国大地幅员辽阔，历史文化悠久，拥有无限风光。让我们一起领略祖国壮丽山河！!-主体代码 例4.7!-标签里面嵌套一个超链接，targettarget属性属性值为_blank_blank，打开一个新窗口，打开一个新窗口-东岳泰山!-4.2 使用CSS浮动与定位4.2.8 案例-祖国风光推荐代码实现在上述主体代码中，页面主要分为2个部分，上半部分是标题和5段文字，下半部分是风景展示模块，4个块级子元素里分别有1个图片标签和1个段落标签，且段落标签中包含一个超链接。/*设置标题父元素*/.headerwi

48、dth:100%;height:50px;position:relative;/*position:relative;/*为标题父元素添加相父元素添加相对定位定位*/*/*设置标题子元素*/.headerh3width:155px;height:30px;/*/*设置置标题子元素添加子元素添加绝对定位，将子元素定位到父元素正中定位，将子元素定位到父元素正中间*/*/position:absolute;position:absolute;top:0;top:0;bottom:0;bottom:0;left:0;left:0;right:0;right:0;margin:auto;margin:a

49、uto;/*设置正文文字*/.wordline-height:26px;/*line-height:26px;/*设置行高置行高*/*/font-size:16px;/*font-size:16px;/*设置文字大小，一个字符置文字大小，一个字符16px*/16px*/text-indent:32px;/*text-indent:32px;/*设置段落首行置段落首行缩进，缩进2 2个字符个字符*/*/代码实现4.2 使用CSS浮动与定位4.2.8 案例-祖国风光推荐CSS部分代码 例4.7/*/*使用使用伪元素清除浮元素清除浮动*/*/.clearfix:after.clearfix:afte

50、rcontent:;content:;display:block;display:block;clear:both;clear:both;/*/*为风景展示模景展示模块中的中的风景景1 1和和风景景2 2设置左浮置左浮动*/*/.view1,.view2.view1,.view2float:left;float:left;/*/*使用空使用空标签，清除，清除风景景1 1和和风景景2 2左浮左浮动带来的影响来的影响*/*/.clear.clearclear:both;clear:both;/*/*为风景展示模景展示模块中的中的风景景3 3和和风景景4 4设置左浮置左浮动*/*/.view3,.v