网页设计与制作CSS.ppt

《网页设计与制作CSS.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作CSS.ppt（63页珍藏版）》请在三一办公上搜索。

1、CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度和减少需要上传的代码量，也减少了重复劳动的工作量为网页上的元素精确地定位 把网页上的内容结构和格式控制相分离只要修改CSS样式表文件就可以改变整个站点的风格特色 CSS是一种样式表语言，用户可以使用它将样式（如：字体，间距及语音提示等）附加到结构化的文档（如：HTML文档和XML应用）中。由于CSS将文档呈现的样式和文档的内容相互分离，因此网页的写作和站点的维护得以简化。,CSS（Cascad

2、ing Stylesheets，层叠样式表）,样式是一个规则，告诉浏览器如何表现特定的HTML或XHTML标签中的内容。每个标签都有一系列相关的样式属性，它们的值决定了浏览器将如何显示这个标签。一条规则定义了标签中一个或几个属性的特定值。将样式和标签结合起来的方式有三种:内联样式表、文档级样式表，或者通过使用外部样式表。1、内联样式(inline style)是连接样式和标签的最简单的方式，只需在标签中包含一个style属性，后面再跟一列属性及属性值即可。浏览器会根据样式属性及其值来表现标签中的内容。Bachs home pageBachs home page因为内联样式会向其标签的定义中添加

3、更多内容，所以它们难维护，也难以阅读。,2、文档级样式表将样式表放在内的标签和(/style结束标签之间，就会影响文档中所有相同标签的内容标签功能:定义文档级样式表属性:dirlangmediatitletype和标签之间的所有内容都将被看作是样式规则的一部分type属性级联样式表全部都是text/css类型;JavaScript样式表使用的类型则是text/javascript Bachs home page h1color:blue;font-style:italic Bachs home page Johann Sebastian Bach was a prolific composer

4、.,3、链接式外部样式表当在文档的标签中使用标签 Bachs home page Bachs home page Johann Sebastian Bach was a prolific composer.link元素规定了：链接类型：指向“stylesheet”。通过“href”属性，指定了样式表的位置。链接的样式表的类型：“text/css”。,样式语法：样式的语法(规则)样式规则至少由三个基本部分组成:1、选择符selector：HTML或XHTML标记元素的名称，2、大括号 3、大括号 括起来并用分号分隔的样式列表（样式:”属性:属性值”）selectorpropertyl:value

5、l;property2:value2;.例如：h1color:purple;font-style:italic样式的种类：、单个的简单选择符（只有一个标记）h1color:blue;font-style:italic分组选择符（集合选择符）具有相同样式的选择符可以写在一起，中间用逗号分开。如：h1,h2,h3color:red;font-style:italic3、嵌套选择符（派生选择符/上下文选择符）E F 匹配元素 E 的任意后代元素 Fp bcolor:red将出现在p之内任何位置的b元素的文本颜色设置为红色 p b，h1 subcolor:green将出现在p之内任何位置的b元素和h1

6、之内任何位置的sub元素的文本颜色设置为绿色,3、ID选择符精通HTML语言，完全能手写HTML代码；熟练掌握ASP、ASP.Net、PHP,JAVA、JAVASCRIPT等技术；熟悉网站的管理、设计规划、前台、后台程序制作技术。熟练SQL server,Oracle 数据库管理系统,能够独立完成数据库的开发;#first_parafont-weight:bold#first_parafont-weight:bold;letter-spacing:3px;#first_parafont-weight:bold;letter-spacing:3px;font-family:楷体_GB2312;I

7、D选择符的前面是#号ID只能在某个HTML文档中出现一次，即ID名称（如first_para）不能重复、类选择符商务类人才可以分为五种：一是企业网络营销业务，包括利用网站为企业开拓网上业务、网络品牌管理、客户服务等；二是网上国际贸易，包括利用网络平台开发国际市场、进行国际贸易；三是新型网络服务商的内容服务，包括频道规划、信息管理、频道推广、客户服务等；四是电子商务支持系统的推广，负责销售电子商务系统和提供电子商务支持服务、客户管理等；五是创业，包括利用虚拟市场提供产品和服务，也可以直接为虚拟市场提供服务。对于这类人才，一方面要求他们是管理和营销的高手，同时也应熟悉网络虚拟市场下新的经济规律，另

8、一方面他们必须掌握网络和电子商务平台的基本操作技术。,、类选择符-.second_paracolor:red;.second_paracolor:green;background-color:#e8d3e3;类选择符通过直接引用元素中类属性的值而产生效果。在这个引用前面总是一个句点(.)，用它来标识一个类选择符。这个句点是必要的，因为它可以帮助类选择符与其他元素相区别。p.second_paracolor:green;background-color:#e8d3e3;样式只对类属性价为second_para的段落起作用、伪类选择符:link:伪类适用于那些还未被访问的连接:visited:伪类

9、适用于用户已经访问过的连接:hover伪类:用于用户指向一个元素,但还没有激活它的时候:active伪类适用于一个元素被用户激活的时候:focus伪类适用于一个元素获得焦点（接受键盘事件或其它形式的文本输入）的时候,a color:purplea:linkcolor:reda:visitedcolor:bluea:hovercolor:blue;a:activecolor:yellow学生作品a.student:visitedcolor:purple;a.student:link,a.student:visitedcolor:red;注意a:hover必须放置在a:link和a:visited

10、规则之后，否则层叠规则将隐藏a:hover的color属性。,6、伪元素first-line伪元素:一个段落的第一个格式化的行应用特殊的样式This is a somewhat long HTML paragraph that will be broken into several lines.The first line will be identifiedby a fictional tag sequence.The other lines will be treated as ordinary lines in the paragraph.P:first-line text-transf

11、orm:uppercase;color:red;:first-letter伪元素可以用于“词首(首字符或首字)”P:first-letter color:green;font-size:200%;font-style:italic;,通配选择符*margin:0;padding:0;元素间的关系：这是是h1的内容这是一个段落p的内容这里是strong的内容div同h1 和 p 形成“父/子”关系，div 是 h1 和 p 的“父元素”。p 和strong 形成“父/子”关系，strong 的“父元素”是 p。h1,p,strong 都是 div 的“子元素”（三者都包含在 div 之内）div

12、 是 h1 p strong 三者的“祖先”，div和strong并非“父/子”关系，而是“祖孙”关系，但 strong 依然是 div 的“子（孙）元素”。h1 和 p 两者是相邻的E F（父子元素）匹配父元素 E 的任意子元素F注释/*/*P background-color:#FFFF66*/,CSS元素分类在CSS中，元素被分为三种类型:块级元素:诸如段落、标题、列表、表格、DIV和BODY等元素都是块级(block-level)元素。每个块级元素都从一个新行开始显示，而且其后的元素也需另起一行进行显示。内联元素:如a,em,span元素及大多数的替换元素，如图像和表单输入元素。它们不

13、必在新行上显示，也不强迫其他元素在新行上显示，而且可以作为任何其他元素的子元素。列表项元素 在HTML中只包含li元素。它们类似于书签，用干特殊的表示场合(如圆点、字母或数字)。如果它们出现在某种有序列表中，则具有顺序性。如在有序列表中的列表项能依据它们的上下文自动编号。这几种元素占据了display属性值（Block、in1ine、list-item、none）四个值中的三个。如果将元素的display属性设成none，则元素的存在会被浏览器所忽略，而且也不被显示。block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度,等是

14、块元素的,inline元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。,和是inline元素的例子用display:inline 或display:block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？让一个inline元素从新行开始；让块元素和其他元素保持在一行上；控制inline元素的宽度；控制inline元素的高度；,HTML块级元素：address-地址blockquote-块引用div-常用块级容易，也是css layout的主要标签dl-定义列表fieldset-form控制组form-交互表单h1-大标题

15、h2-副标题h3-3级标题h4-4级标题h5-5级标题h6-6级标题hr-水平分隔线ol 有序列表p-段落pre-格式化文本table-表格ul 无序列表,英寸（in）、厘米（cm）和毫米（mm）根据显示的实际尺寸来确定长度。此类单位不随显示器分辨率的改变而改变,12pt字（pc）相当于我国新四号铅字的尺寸 即windows系统定义的12字号大小为单位(1pc=12pt)。该单位前输入的数字表示字号大小的倍数。如font-size:2pc;表示文字大小为24pt；,是以当前文本的百分比定义尺寸。如font-size:200%是指文字大小为原来的2倍；,%百分比-字体、颜色、宽度,像素（px）根

16、据显示器的分辨率来确定长度，在web应用中多采用该单位；像素是相对于显示器屏幕分辨率而言的,点数（pt）绝对长度单位。点（Point）。,字体高（em）表示当前文本的尺寸，相对长度单位。相对于当前对象内文本的字体尺寸 如font-size:2em是指文字大小为原来的2倍；,1)font-family:设置或检索用于对象中文本的字体名称或字体系列名称语法：font-family:name(字体名称)font-family:cursive|fantasy|monospace|serif|sans-serif(字体系列名称)适用于:所有元素bodycolor:red;font-family:楷体_G

17、B2312 字体系列比如，常见的确字体Times。，实际上Times是许多变形的组合，包括TimesRegular,TimesBold,TimesItalic,Timespblique,TimesBoldItalic,TimesBoldOblique等等。Times的每一种变形都是一个字体形式,Times就是这些字体形式的组合。也就是说Times是一个字体系列，并不单单是一种.除特定的字体系列，如Times,Verdana,Arial外，CSS还定义了五种一般字体系列:Serif字体 成比例例且有衬线(serif)的字体,一种字体有比例，是指宇体中的所有字母根据它们不同的尺寸占据不同的宽度。衬

18、线特指加在字母上做装饰的细线，Sans serif字体:有比例但没有衬线的字体。,Mono space字体 无比例的字体。通常用于模拟打字机打出的文本Cursive字体 试图模拟人的笔迹的字体。通常这些字体大部分是由曲线和比衬线字体更强的笔画修饰组成的。Fantasy字体 不能通过某种单一的特征来定义，而且也不能简单地归为其他系列的某一类 的那些字体。这样的字体较少.2)font-weight：设置或检索对象中的文本字体的粗细。Normal(初始值)、bold、bolder、lighter、100900适用于:所有元素divfont-weight:bold divfont-weight:lig

19、hter 3)font-size：字体尺寸允许值:xx-small、x-small、small、medium(初始值)、large、x-large、x-large、larger、smaller、长度（pt|px|cm|in|mm）、百分比(%)适用于:所有元素pfont-size:xx-large pfont-size:30pxpfont-size:150%,4)font-style：字体样式Normal(默认值)、italic（斜体）、oblique（倾斜的字体）适用于：所有元素divfont-style:italic5）font-variant：字体变形Normal(默认值)、small-

20、caps（小型的大写字母字体）适用于：所有元素span font-variant:small-caps;,1）text-indent：文本首行的缩进。允许值：长度、百分比适用于：块级元素span text-indent:1.25in;首行缩进四分之一英寸span text-indent:-10em;span text-indent:-5%;2）text-alignLeft、right、center、justify 适用于：块级元素p text-align:right;3）text-decoration下划线，上划线，删除线，闪烁 none、underline、overline、line-thr

21、ough、blink 适用于：所有元素 Ptext-decoration:line-through4)letter-spacing字母间距适用于：所有元素 Pletter-spacing:0.5em 5)word-spacing:单词之间的间距 适用于：所有元素 Pword-spacing:1em,6）text-transform:该属性控制某元素文本的大小写效果 值：capitalize|uppercase|lowercase|nonecapitalize 将每个单词的首字符变为大写。uppercase 将每个单词的所有字符变为大写。lowercase 将每个单词的所有字符变为小写适用于：所

22、有元素 divtext-transform:capitalizedivtext-transform:uppercase7)white-space:该属性声明了元素内的空白是如何处理的 值：normal|pre|nowrap|适用于：块级元素 normal 该值告诉用户端，合并一系列的空白，在必要的时分行pre 该值阻止用户端合并一系列的空白nowrap 该值象normal那样合并空白，但是阻止文本内的分行divtext-transform:uppercase;white-space:nowrap,8）line-height:行高，行高指的是文本行的基线间的距离允许值:长度、百分比、数字、nor

23、mal适用于：所有元素divline-height:2emdivline-height:0.5indivline-height:32pt9）vertical-align允许值:baseline、sub、super、bottom、text一bottom、middle、top、Text-top、百分比适用于：内联元素,和是inline元素arryi spanvertical-align:sub spanvertical-align:-200%,在CSS中，可以设置任何元素的前景色和背景色，从BODY元素到下划线和斜体标记，几乎所有的一切:列表项、整个列表、标题、超链接、表格单元、表单元素.前景色设

24、置前景色的最简便方法是用css的color属性。color属性适用于:所有元紊p(color:yellow;div(color:blue;p.second_para1color:blue/*类标识为second_para1的段落文本颜色为蓝色*/p#second_para1color:red/*ID标识为second_para1的段落文本颜色为红色*/p#second_para1 a:linkcolor:red/*ID标识为second_para1的段落中的链接文本颜色为红色*/p#second_para1 a:linkcolor:red/*类标识标识为second_para1 的段落中的链接

25、文本颜色为红色*/颜色属性也可以应用于表单(form)元素。input#the-inputcolor:red;,背景颜色background-color允许值或transparent适用于:所有元紊Pbackground-color:#ccccffa:linkbackground-color:silver;p.second_para a:linkbackground-color:silver;背景图像backgraund-image允许值:适用于:所有元紊bodybackground-image:url(bg1.JPG)pbackground-image:url(c3.gif)divbackg

26、round-image:url(bg1.jpg)background-repeat允许值Repeat、no-repeat、repeat-x、repeat-yrepeat使图像在两个方向平铺repeat-x、repeat-y:使图像分别在水平和垂直方向上平铺初始值:repeat,bodybackground-image:url(03.gif);background-repeat:repeat-y;背景图像位置background-position适用于块级元素和替换元素允许值：left、right、top、bottom、center、百分比、长度值bodybackground-image:url

27、(03.gif);background-repeat:repeat-x;background-position:top要使背景图像横跨元素的三分之一，纵跨三分之二，可以按如下声明bodybackground-image:url(03.gif);background-repeat:no-repeat;background-position:33%66%使得背景图像的中心同其父元素中心对齐background-position:50%50%,背景图像位置background-position长度值当用长度值来决定背景图像的位置时，它们被解释为相对于元素左上角的偏移量。背景图像上的偏移点也为左_匕角

28、的那个点。如果设置为20px 30px，那么图像的左上角将位于元素左上角往右20个像素，往下30个像素的位置background-position:50px 80px而且，长度值和百分比值还可以为负，这将使图像以某种程度偏离元素。可以只让图像的一部分显示于元素上阻止图像随文本滚动:background-attachment使用background-attachment属性，可以使背景图像固定在视野范围内，以避免出现因滚动而消失的效果:背景图象设置在body上允许值：scroll、fixedbodybackground-image:url(03.gif);background-repeat:no

29、-repeat;background-position:50px 80px;background-attachment:fixed背景属性可综合写到一个缩略属性中，可按任意顺序排列,list-style-typelist-style-imagelist-style-positionlist-style（组合使用以上属性）,CSS列表项属性,列表属性CSS2标准允许控制列表元素的外观尤其是有序和无序列表。1、list-style-type允许值Disc实心圆Circle常空心圆Square空心方块Decimal 1，2，3，4，5，upper-alphaA，B，C，D，E，lower-alpha

30、a，b，c，d，e，upper-romanI，II,III，IV，V，lower-romani,ii,iii,iv,vnone适用于：列表项元素12ullist-style-type:upper-roman;,2、list-style-image该属性指定用来列表项标记的图形 允许值：|none|inherit 适用于:列表项元素list-style-image:url(03.gif);3、list-style-position定位与一个列表项有关的记号:是在与列表有关的块外面还是里面。允许值：inside|outside适用于:列表项元素ullist-style-type:upper-alp

31、ha;list-style-position:inside;border-style:dashed;4、组合三个列表样式属性list-style适用于:列表项元素ullist-style:upper-alpha outside url(03.gif);(中间用空格隔开)border-style:dashed,ul lilist-style:upper-alpha inside url(03.gif);border-style:dotted 列表项单个项目12ullist-style:upper-alpha outside url(03.gif);border-style:dashed#temp

32、list-style:upper-alpha inside url(03.gif);border-style:dotted,WidthHeightBorder-widthBorder-styleBorder-colorPadding-内边距Margin 外边距,CSS框属性,CSS中，所有文档元素都生成一个矩形框，称之为元素框。这个框描述了元素及其属性在文档布局中所占的空间大小，因此每个框都可以影响其他元素的位置及大小,边框与内容之间的部分称为边白（内边距）（padding）如果边白为0，则边白边和内容边重合,边框外为边界（margin）-框的外框如果边界为0，则边界与边框重合,框的属性及属性

33、值,边框属性设置框的边框区的宽度，颜色和样式 通常情况下，一个元素的width定义为左侧内部边线到右侧内部边线的趾离height定义为上内边线到下内边线的距离。width允许值、auto初始值：auto:元素框宽度等于父元素宽度适用于：块级元紊和替换元紊百分比是指相对于父元素的宽度。helght允许值：、auto初始值：auto适用于：块级元紊和替换元紊框的示例#kuangtext-align:center;width:20%;height:50px;border-style:solid,边框样式border-style属性及属性值元素的边框(border就是一条(有时是多条)围绕着元素内容及

34、补白的线border-style(border-top-style，border-right-style，border-bottom-style，border-left-style)取值：none:没有边框dotted：边框是一系列的点。dashed 边框是一系列的短线条的段。solid 边框是一条单一的线。double 边框有两条实线。两条线宽+空白的宽度之和等于border-width的值。groove 边框看上去好象是雕刻在画布之内。ridge 和grove相反：边框看上去好象是从画布中凸出来。inset 该边框使整个框看上去好象是嵌在画布中。outset 和inset相反：该边框使整个

35、框看上去好象是从画布中凸出来,边框样式border-style示例#kuangtext-align:center;width:20%;height:50px;border-top-style:dotted;border-bottom-style:double;border-right-style:groove;border-left-style:inset;边框本身border-width宽度border-top-width，border-right-width，border-bottom-width，border-left-width及组合写法border-width 可以取如下值：thin

36、 一个窄的边框。medium 一个中等的边框。thick 一个厚边框。边框的厚度是显式值。显式的边框宽度不能为负数。,边框宽度border-width示例#kuangtext-align:center;width:20%;height:50px;border-top-style:dotted;border-bottom-style:double;border-right-style:solid;border-left-style:outset;border-top-width:10px;border-bottom-width:thick;border-right-width:medium;bo

37、rder-left-width:20px;border-width组合写法：如果只有一个值，它适用于所有四边。如果有两个值，顶底边框采用第一个值，左右边框采用第二个值。如果有三个值，顶边框采用第一个值，左右边框采用第二个值，而底边框采用第三个值。如果有四个值，它们分别适用于顶，右，底，左四边。,边框颜色border-color属性及属性值border-top-color，border-right-color，border-bottom-color，border-left-color及组合写法border-color 颜色值：color、transparent 适用于：所有元素 这是个块divb

38、order-width:thin;border-style:dashed;/*border-color:blue*/border-width:thin;border-style:dashed;border-top-color:blue;border-bottom-color:teal;border-left-color:purple;border-right-color:red;,边白（内边距）padding属性及属性值内边距是元素的边框和内容之间的距离，适用于任何元素padding-top，padding-right，padding-bottom，padding-left 及组合写法padd

39、ing 取值：指定一个确定宽度。百分比的计算基于生成的框的包含块的宽度padding：如果只有一个值，它适用于所有四边。如果有两个值，顶底边白设置为第一个值而左右边距设置为第二个值。如果有三个值，顶边白设置为第一个值，左右边白设置为第二个值，底边白设置为第三个值。如果有四个值，它们分别设置顶，右，底，左边白。divborder-width:thin;border-style:dashed;border-top-color:blue;border-bottom-color:teal;border-left-color:purple;border-right-color:red;padding:2

40、em 6em 2em 20%;,CSS外边距(界)属性及属性值margin-top，margin-right，margin-bottom，margin-left以及margin 适用于：所有元素取值：百分比：相对于包含块的宽度、auto margin 如果仅有一个值，它将应用于所有四边。如果有两个值，顶底边距设置为第一个值，左右边距设置为第二个值。如果有三个值，顶边距设置为第一个值，左右边距设置为第二个值，底边距设置为第三个值。如果有四个值，它们分别设置顶，右，底，左边距。margin-top:1em;margin-right:50;margin-bottom:3em;margin-left:

41、2em;使块级元素居中于父元素ssssssssssssssssssss,CSS外边距(界)属性及属性值使块级元素居中于父元素：左右外边距设置为auto#the-divwidth=400px;height=200px;border:solid#the-pwidth:100px;height:40px;border:dashed;margin-left:auto;margin-right:auto样式属性在链接上的应用 链接是行内元素，这意味着只有在单击链接的内容时它们才会激活。但是，有时候希望实现像按钮的效果，有更大的可单击区域。为此可以将锚的display属性设置为block，然后修改widt

42、h、height和其他属性来创建需要的样式和单击区域。,样式属性在链接上的应用搜狐新浪网易ul a:linkcolor:redul a:visitedcolor:blackul a:hovercolor:blue;ul a:activecolor:yellow;a:visitedcolor:black;text-decoration:none;/*把链接的默认下划线去掉*/border-bottom-width:1px;border-bottom-style:dashed;border-bottom-color:red;/*border-bottom:1px dashed red;*/line

43、-height:150%;,样式属性在链接上的应用ulborder:1px solid#333;width:120px;margin:5px;padding:2px;list-style-type:none;libackground:#DDDDDD;border-bottom:1px solid#666;使链接不局限于链接文字ul a:link,ul a:visited,ul a:hover,ul a:activetext-decoration:none;display:block;/*把链接定义为块元素*/width:100%/*把链接宽度定义为包含块的宽度*/,样式属性在表格上的应用 金牌

44、 银牌 铜牌 中国 78 80 56 俄罗斯 78 80 56 美国 78 80 56 英国 78 80 56 thtext-align:center;color:blue;background:#e99;width:80px;tdborder-style:solid;border-width:1px;tableborder-collapse:collapse;/*去掉行之间的间隔*/,样式属性在表格上的应用 金牌 银牌 铜牌 中国 78 80 56 俄罗斯 78 80 56 美国 78 80 56 英国 78 80 56.singlebackground:yellow;.doubleback

45、ground:#799;有关表单元素上的应用(略)学号*:姓名*:.base-inputdisplay:block;border:none;border-bottom:2px solid black;color:blue;,浮动float-使一个元素脱离元素自然流允许值:left、right、none初始值:none适用于:所有元素对象浮动时，对象将被视作块对象(block-level)，即display属性等于block.就是说，浮动对象的display特性将被忽略。div1div2div3#div1border:1px solid#000;background-color:#bbb;hei

46、ght:40px;width:40px;/*float:right*/#div2border:1px solid#000;background-color:#bbb;height:40px;width:40px;float:right/*浮动-浮动后浮动元素后面的元素将占据浮动元素的位置*/,#div3border:1px solid#000;background-color:#bbb;height:40px;width:40px;/*float:right*/clear:right;/*使浮动元素后面的元素保持原来的位置*/浮动float例子 float and left 对象浮动时，对象将

47、被视作块对象(block-level)，即display属性等于block.就是说，浮动对象的display特性将被忽略/*p块级元素换行*/#containerborder:1px solid#000;background-color:#bbb;padding:20px;使图象浮动，首先将IMG元素包含在一个元素中，这样可以添加更多样式.img-floatfloat:left;margin:0 5px 5px 0;,清除clear在浮动元素之后的元素将环绕在浮动元素周围，一个图象浮动在左边，如果其后的段落文本足够长，文本将环绕在图象周围，如果不希望看到这种情况，可以对浮动元素之后的元素应用清

48、除clear允许值:left、right、both、none初始值:none适用于:所有元素none:默认值。允许两边都可以有浮动对象left:不允许左边有浮动对象right:不允许右边有浮动对象both:不允许有浮动对象Pclear:left可以确保p左边没有浮动元素,CSS定位position属性允许值:static、relative、absolute、fixed、inherit初始值:static适用于:所有元紊relative:设置此属性值为 relative 会保持对象在正常的HTML流中。如果对一个元素进行相对定位，可以通过设置left，right，top，bottom 等属性在正

49、常文档流中偏移位置，让这个元素“相对于”它的起点进行移动。absolute:绝对定位使元素的位置与文档流无关，absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局，使用 left，right，top，bottom 等属性相对于其最接近的一个具有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义,假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。要激活对象的绝对(absolute)定位，除设置此属性值为 absolute,还必须指定 left，rig

50、ht，top，bottom 属性中的至少一个，否则上述属性会使用他们的默认值 auto，这将导致对象遵从正常的HTML布局规则 对于定位的主要问题是要记住每种定位的意义。相对定位是“相对于”元素在文档流中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素。,偏移属性top、bottom、left、right(当position属性值为relative、absolute、fixed(IE以下版本不支持)适用于:定位元素允许值：、auto初始值:auto绝对定位的对象不具有边距margin，但仍有补白padding和边框border#containerborder:1px solid#000;