网页设计与制作CSSppt课件

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

2、读。,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. ,3、链接式外

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:val

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

5、p之内任何位置的b元素和h1之内任何位置的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;fo

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

7、和营销的高手，同时也应熟悉网络虚拟市场下新的经济规律，另一方面他们必须掌握网络和电子商务平台的基本操作技术。,、类选择符 - .second_paracolor:red; .second_paracolor:green;background-color:#e8d3e3; 类选择符通过直接引用元素中类属性的值而产生效果。在这个引用前面总是一个句点(.)，用它来标识一个类选择符。这个句点是必要的，因为它可以帮助类选择符与其他元素相区别。 p.second_paracolor:green;background-color:#e8d3e3; 样式只对类属性价为second_para的段落起作用 、伪类

8、选择符 :link:伪类适用于那些还未被访问的连接 :visited:伪类适用于用户已经访问过的连接 :hover伪类 :用于用户指向一个元素,但还没有激活它的时候 :active伪类适用于一个元素被用户激活的时候 :focus伪类适用于一个元素获得焦点（接受键盘事件或其它形式的文本输入）的时候,a color:purple a:linkcolor:red a:visitedcolor:blue a:hovercolor:blue; a:activecolor:yellow 学生作品 a.student:visitedcolor:purple; a.student:link,a.student

9、:visitedcolor:red; 注意a:hover必须放置在a:link和a:visited规则之后，否则层叠规则将隐藏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 identified by a fictional tag sequence. The other lines will be treated as or

10、dinary lines in the paragraph. P:first-line text-transform: 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 和stro

11、ng 形成“父/子”关系，strong 的“父元素”是 p 。 h1,p,strong 都是 div 的“子元素” （三者都包含在 div 之内 ）div 是 h1 p strong 三者的“祖先”， div和strong并非“父/子”关系，而是“祖孙”关系，但 strong 依然是 div 的“子（孙）元素”。 h1 和 p 两者是相邻的 E F （父子元素） 匹配父元素 E 的任意子元素F 注释/*/ /*P background-color: #FFFF66 */,CSS元素分类 在CSS中，元素被分为三种类型: 块级元素: 诸如段落、标题、列表、表格、DIV和BODY等元素都是块级(b

12、lock-level)元素。每个块级元素都从一个新行开始显示，而且其后的元素也需另起一行进行显示。 内联元素: 如a, em, span元素及大多数的替换元素，如图像和表单输入元素。它们不必在新行上显示，也不强迫其他元素在新行上显示，而且可以作为任何其他元素的子元素。 列表项元素 在HTML中只包含li元素。它们类似于书签，用干特殊的表示场合(如圆点、字母或数字)。如果它们出现在某种有序列表中，则具有顺序性。如在有序列表中的列表项能依据它们的上下文自动编号。 这几种元素占据了display属性值（Block、in1ine、list-item、none）四个值中的三个。如果将元素的display

13、属性设成none，则元素的存在会被浏览器所忽略，而且也不被显示。 block元素的特点是： 总是在新行上开始；高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度, , , 等是块元素的,inline元素的特点是： 和其他元素都在一行上；高，行高及顶和底边距不可改变； 宽度就是它的文字或图片的宽度，不可改变。 , , , , , 和是inline元素的例子 用display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？ 让一个inline元素从新行开始； 让块元素和其他元素保持在一行上； 控制inli

14、ne元素的宽度； 控制inline元素的高度；,HTML块级元素： address - 地址 blockquote - 块引用 div - 常用块级容易，也是css layout的主要标签 dl - 定义列表 fieldset - form控制组 form - 交互表单 h1 - 大标题 h2 - 副标题 h3 - 3级标题 h4 - 4级标题 h5 - 5级标题 h6 - 6级标题 hr - 水平分隔线 ol 有序列表 p - 段落 pre - 格式化文本 table - 表格 ul 无序列表,英寸（in）、厘米（cm）和毫米（mm） 根据显示的实际尺寸来确定长度。此类单位不随显示器分辨率的

15、改变而改变,12pt字（pc）相当于我国新四号铅字的尺寸 即windows系统定义的12字号大小为单位(1pc=12pt)。该单位前输入的数字表示字号大小的倍数。如font-size: 2pc;表示文字大小为24pt；,是以当前文本的百分比定义尺寸。如font-size:200%是指文字大小为原来的2倍；,%百分比-字体、颜色、宽度,像素（px）根据显示器的分辨率来确定长度，在web应用中多采用该单位； 像素是相对于显示器屏幕分辨率而言的,点数（pt）绝对长度单位。点（Point）。,字体高（em）表示当前文本的尺寸，相对长度单位。 相对于当前对象内文本的字体尺寸 如font-size:2em

16、是指文字大小为原来的2倍；,1)font-family :设置或检索用于对象中文本的字体名称或字体系列名称 语法： font-family : name(字体名称) font-family : cursive | fantasy | monospace | serif | sans-serif (字体系列名称) 适用于:所有元素 bodycolor:red;font-family :楷体_GB2312 字体系列 比如，常见的确字体Times。，实际上Times是许多变形的组合，包括TimesRegular, TimesBold, TimesItalic, Timespblique,TimesB

17、oldItalic, TimesBoldOblique等等。Times的每一种变形都是一个字体形式,Times就是这些字体形式的组合。也就是说Times是一个字体系列，并不单单是一种. 除特定的字体系列，如Times, Verdana, Arial外，CSS还定义 了五种一般字体系列: Serif字体 成比例例且有衬线( serif)的字体,一种字体有比例，是指宇体中的所有字母根据它们不同的尺寸占据不同的宽度。衬线特指加在字母上做装饰的细线， Sans serif字体:有比例但没有衬线的字体。,Mono space字体 无比例的字体。通常用于模拟打字机打出的文本 Cursive字体 试图模拟人

18、的笔迹的字体。通常这些字体大部分是由曲线和比衬线字体更强的笔画修饰组成的。 Fantasy字体 不能通过某种单一的特征来定义，而且也不能简单地归为其他系列的某一类 的那些字体。这样的字体较少. 2)font-weight：设置或检索对象中的文本字体的粗细。 Normal(初始值)、 bold、 bolder、 lighter、100900 适用于:所有元素 divfont-weight:bold divfont-weight:lighter 3)font-size：字体尺寸 允许值:xx-small、x-small 、small 、medium (初始值) 、large 、x-large、x-

19、large、larger 、smaller 、长度（pt|px|cm|in|mm）、百分比(%) 适用于:所有元素 pfont-size:xx-large pfont-size:30px pfont-size:150%,4)font-style：字体样式 Normal( 默认值)、italic （ 斜体）、oblique （ 倾斜的字体 ） 适用于：所有元素 divfont-style:italic 5）font-variant：字体变形 Normal( 默认值)、small-caps（小型的大写字母字体 ） 适用于：所有元素 span font-variant: small-caps; ,1

20、）text-indent：文本首行的缩进。 允许值：长度、百分比 适用于：块级元素 span text-indent:1.25in;首行缩进四分之一英寸 span text-indent:-10em; span text-indent:-5%; 2）text-align Left、right、 center、 justify 适用于： 块级元素 p text-align:right; 3）text-decoration下划线，上划线，删除线，闪烁 none 、 underline 、 overline 、 line-through、blink 适用于： 所有元素 Ptext-decoratio

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

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

23、字、normal 适用于：所有元素 divline-height:2em divline-height:0.5in divline-height:32pt 9）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:lin

25、kcolor:red /*类标识标识为second_para1 的段落中的链接文本颜色为红色*/ 颜色属性也可以应用于表单(form)元素。 input#the-inputcolor:red;,背景颜色 background-color 允许值 或transparent 适用于:所有元紊 Pbackground-color:#ccccff a:linkbackground-color:silver; p.second_para a:linkbackground-color:silver; 背景图像 backgraund-image 允许值: 适用于:所有元紊 bodybackground-im

26、age:url(bg1.JPG) pbackground-image:url(c3.gif) divbackground-image:url(bg1.jpg) background-repeat 允许值 Repeat、no-repeat、repeat-x、 repeat-y repeat使图像在两个方向平铺 repeat-x、 repeat-y:使图像分别在水平和垂直方向上平铺 初始值: repeat,body background-image:url(03.gif); background-repeat: repeat-y; 背景图像位置 background-position 适用于 块级

27、元素和替换元素 允许值：left、right 、top、 bottom 、center 、百分比、长度值 body background-image:url(03.gif); background-repeat: repeat-x; background-position:top 要使背景图像横跨元素的三分之一，纵跨三分之二，可以按如下声明 body background-image:url(03.gif); background-repeat: no-repeat; background-position:33% 66% 使得背景图像的中心同其父元素中心对齐background-positi

28、on:50% 50%,背景图像位置background-position长度值 当用长度值来决定背景图像的位置时，它们被解释为相对于元素左上角的偏移量。背景图像上的偏移点也为左_匕角的那个点。 如果设置为20px 30px，那么图像的左上角将位于元素左上角往右20个像素，往下30个像素的位置 background-position:50px 80px 而且，长度值和百分比值还可以为负，这将使图像以某种程度偏离元素。可以只让图像的一部分显示于元素上 阻止图像随文本滚动:background-attachment 使用background-attachment属性，可以使背景图像固定在视野范围内，

29、以避免出现因滚动而消失的效果:背景图象设置在body上 允许值：scroll、fixed body background-image:url(03.gif); background-repeat: no-repeat; background-position:50px 80px; background-attachment:fixed 背景属性可综合写到一个缩略属性中，可按任意顺序排列,list-style-type list-style-image list-style-position list-style（组合使用以上属性）,CSS列表项属性,列表属性 CSS2标准允许控制列表元素的外观

30、尤其是有序和无序列表。 1、list-style-type 允许值 Disc实心圆 Circle常空心圆 Square空心方块 Decimal 1，2，3，4，5， upper-alphaA，B，C，D，E， lower-alphaa ，b，c，d，e， upper-romanI，II,III，IV，V， lower-romani,ii,iii,iv,v none 适用于：列表项元素 1 2 ul list-style-type:upper-roman; ,2、list-style-image 该属性指定用来列表项标记的图形 允许值： | none | inherit 适用于:列表项元素 li

31、st-style-image: url(03.gif); 3、list-style-position 定位与一个列表项有关的记号:是在与列表有关的块外面还是里面。 允许值： inside | outside 适用于:列表项元素 ul list-style-type:upper-alpha; list-style-position:inside ; border-style: dashed; 4、组合三个列表样式属性 list-style 适用于:列表项元素 ul list-style:upper-alpha outside url(03.gif);(中间用空格隔开) border-style:

32、 dashed ,ul li list-style:upper-alpha inside url(03.gif); border-style: dotted 列表项单个项目 1 2 ul list-style:upper-alpha outside url(03.gif); border-style: dashed #temp list-style:upper-alpha inside url(03.gif); border-style: dotted ,Width Height Border-width Border-style Border-color Padding-内边距 Margin

33、 外边距,CSS框属性,CSS中，所有文档元素都生成一个矩形框，称之为元素框。这个框描述了元素及其属性在文档布局中所占的空间大小，因此每个框都可以影响其他元素的位置及大小,边框与内容之间的部分称为边白（内边距）（padding） 如果边白为0，则边白边和内容边重合,边框外为边界（margin ）-框的外框 如果边界为0，则边界与边框重合,框的属性及属性值,边框属性设置框的边框区的宽度，颜色和样式 通常情况下，一个元素的width定义为左侧内部边线到右侧内部边线的趾离height定义为上内边线到下内边线的距离。 width 允许值 、auto 初始值： auto:元素框宽度等于父元素宽度 适用于

34、：块级元紊和替换元紊 百分比是指相对于父元素的宽度。 helght 允许值：、auto 初始值： auto 适用于：块级元紊和替换元紊 框的示例 #kuang text-align:center; width:20% ; height :50px; border-style:solid ,边框样式border-style属性及属性值 元素的边框(border就是一条(有时是多条)围绕着元素内容及补白的线 border-style(border-top-style，border-right-style，border-bottom-style，border-left-style) 取值： none

35、 :没有边框 dotted ：边框是一系列的点。 dashed 边框是一系列的短线条的段。 solid 边框是一条单一的线。 double 边框有两条实线。两条线宽+空白的宽度之和等于border-width的值。 groove 边框看上去好象是雕刻在画布之内。 ridge 和grove相反：边框看上去好象是从画布中凸出来。 inset 该边框使整个框看上去好象是嵌在画布中。 outset 和inset相反：该边框使整个框看上去好象是从画布中凸出来,边框样式border-style示例 #kuang text-align:center; width:20% ; height :50px; bo

36、rder-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 一个窄的边框。 medium 一个中等的边框。 thick 一个厚边框。 边框的厚度是显式值。显式的边框宽度不能为负数。,边框宽度border-wi

37、dth示例 #kuang text-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 ; border-left-width:20px; border-width组合写法： 如果只有一个值，它适用于所有四边

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

39、olor: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 及组合写法padding 取值 ： 指定一个确定宽度。 百分比的计算基于生成的框的包含块的宽度

40、 padding ： 如果只有一个值，它适用于所有四边。如果有两个值，顶底边白设置为第一个值而左右边距设置为第二个值。如果有三个值，顶边白设置为第一个值，左右边白设置为第二个值，底边白设置为第三个值。如果有四个值，它们分别设置顶，右，底，左边白。 div border-width:thin; border-style:dashed; border-top-color:blue; border-bottom-color:teal; border-left-color:purple; border-right-color:red; padding:2em 6em 2em 20%; ,CSS外边距(

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

42、素居中于父元素 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，然后修改width

43、 、height和其他属性来创建需要的样式和单击区域。,样式属性在链接上的应用 搜狐 新浪 网易 ul a:linkcolor:red ul a:visitedcolor:black ul 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 dash

44、ed red;*/ line-height:150%; ,样式属性在链接上的应用 ul border :1px solid #333; width:120px; margin:5px; padding:2px; list-style-type:none; li background:#DDDDDD; border-bottom:1px solid #666; 使链接不局限于链接文字 ul a:link , ul a:visited, ul a:hover, ul a:active text-decoration:none; display:block;/*把链接定义为块元素*/ width:1

45、00%/*把链接宽度定义为包含块的宽度*/ ,样式属性在表格上的应用 金牌 银牌 铜牌 中国 78 80 56 俄罗斯 78 80 56 美国 78 80 56 英国 78 80 56 th text-align:center; color:blue; background:#e99; width :80px; td border-style:solid; border-width:1px; table border-collapse:collapse;/*去掉行之间的间隔*/ ,样式属性在表格上的应用 金牌 银牌 铜牌 中国 78 80 56 俄罗斯 78 80 56 美国 78 80 56

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

47、略。 div1 div2 div3 #div1 border:1px solid #000; background-color:#bbb; height:40px;width:40px; /*float:right*/ #div2 border:1px solid #000; background-color:#bbb; height:40px;width:40px; float:right/*浮动-浮动后浮动元素后面的元素将占据浮动元素的位置*/ ,#div3 border:1px solid #000; background-color:#bbb; height:40px;width:40

48、px; /*float:right*/ clear:right;/*使浮动元素后面的元素保持原来的位置*/ 浮动float例子 float and left 对象浮动时，对象将被视作块对象(block-level)，即display属性等于block. 就是说，浮动对象的display特性将被忽略/*p块级元素换行*/ #container border:1px solid #000; background-color:#bbb; padding:20px; 使图象浮动，首先将IMG元素包含在一个元素中，这样可以添加更多样式 .img-floatfloat:left;margin:0 5px

49、5px 0;,清除clear 在浮动元素之后的元素将环绕在浮动元素周围，一个图象浮动在左边，如果其后的段落文本足够长，文本将环绕在图象周围，如果不希望看到这种情况，可以对浮动元素之后的元素应用清除clear 允许值:left 、 right 、 both 、none 初始值:none 适用于:所有元素 none :默认值。允许两边都可以有浮动对象 left :不允许左边有浮动对象 right :不允许右边有浮动对象 both :不允许有浮动对象 Pclear:left可以确保p左边没有浮动元素,CSS定位position属性 允许值:static、relative、absolute、fixed

50、、inherit 初始值: static 适用于:所有元紊 relative:设置此属性值为 relative 会保持对象在正常的HTML流中。如果对一个元素进行相对定位，可以通过设置left ， right ， top ， bottom 等属性在正常文档流中偏移位置，让这个元素“相对于”它的起点进行移动。 absolute :绝对定位使元素的位置与文档流无关， absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个具有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 b

51、ody 对象。而其层叠通过 z-index 属性定义,假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。 要激活对象的绝对(absolute)定位，除设置此属性值为 absolute,还必须指定 left ， right ， top ， bottom 属性中的至少一个，否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则 对于定位的主要问题是要记住每种定位的意义。相对定位是“相对于”元素在文档流中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素。,偏移属性top、bottom 、 left 、 right(当position属性值为relative、absolute、fixed(IE以下版本不支持) 适用于:定位元素 允许值： 、 、auto 初始值:auto 绝对定位的对象不具有边距margin，但仍有补白padding和边框border#container border:1px solid #000; background-color:#bbb; width:400px; height:400px; img position:relative; left:80px; top:30px; ,绝对定位以它最近定位的父元素作为参考点，如果没有定位的父元素，则以视窗