课件第七章定位锚点

1、HTML5前端开发1元素定位设置元素定位设置2滚动条设置滚动条设置一、一、position 定位属性，检索对象的定位方式；定位属性，检索对象的定位方式；语法：语法：position：static /absolute/relative/fixed取值：取值：1、static：默认值，无特殊定位，对象遵循：默认值，无特殊定位，对象遵循HTML原则；原则；2、absolute：绝对定位，将对象：绝对定位，将对象从文档流中拖离出来从文档流中拖离出来，使用，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不

2、存在这样的父对象，则依据父元素进行绝对定位；如果不存在这样的父对象，则依据body对对象象(浏览器浏览器)，而其层叠通过，而其层叠通过z-index属性定义；属性定义；3、relative ：相对定位，对象不可层叠，将依据：相对定位，对象不可层叠，将依据right，top，left，bottom（相对定位）等属性（相对定位）等属性在正常文档流中偏移位置在正常文档流中偏移位置；4、fixed：(固定定位固定定位)未支持，对象定位遵从绝对定位方式（未支持，对象定位遵从绝对定位方式（absolute）；但是要遵守一些规范；）；但是要遵守一些规范；值值描述描述staticstatic默认。位置设置为默

3、认。位置设置为 static static 的元素会正常显示，它始终会处于文档流给的元素会正常显示，它始终会处于文档流给予的位置（予的位置（static static 元素会忽略任何元素会忽略任何 toptop、bottombottom、left left 或或 right right 声声明）。明）。relativerelative是相对于默认位置的偏移定位，通过设置是相对于默认位置的偏移定位，通过设置leftleft、toptop、rightright、bottombottom值值可将其移至相对于其正常位置的地方可将其移至相对于其正常位置的地方absoluteabsolute相对于父级元素

4、的绝对定位，浮出、脱离文档流，它不占据空间，就是相对于父级元素的绝对定位，浮出、脱离文档流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接指定指定 “left”“left”、“top”“top”、“right” “right” 以及以及 “bottom” “bottom” 属性。若父级属性。若父级都没有定位，则以都没有定位，则以htmlhtml、bodybody，浏览器的位置为相对位置。，浏览器的位置为相对位置。fixedfixed相对浏览器的绝对定位，可定位于相对于浏览器窗口的指定坐标。此元相对浏

5、览器的绝对定位，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过素的位置可通过 leftleft、toptop、right right 以及以及bottom bottom 属性来规定。属性来规定。不论窗口滚动与否，元素都会留在那个位置。不论窗口滚动与否，元素都会留在那个位置。二、绝对定位和相对定位的区别二、绝对定位和相对定位的区别1、参照物不同，绝对定位的参照物是包含块（父级），相对、参照物不同，绝对定位的参照物是包含块（父级），相对定位的参照物是元素本身位置；定位的参照物是元素本身位置；2、绝对定位将对象从文档流中拖离出来因此不占据空间，相、绝对定位将对象从文档流中拖离出来因此不占据空

6、间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。然占据原来的空间。三、包含块的概念及作用三、包含块的概念及作用 包含块是绝对定位的基础，包含块就是为决定定位元素提供坐包含块是绝对定位的基础，包含块就是为决定定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比比 长度的参考；长度的参考； 默认状态下，默认状态下，body是一个大的包含块，所有绝对定位的元素都是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显

7、示的，如果我们是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。显示位置。定义元素为包含块：给绝对定位元素的父元素添加声明定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；四、定位元素层叠属性：四、定位元素层叠属性：z-index : auto |number检索或设置对象的层叠顺序。检索或设置对象的层叠顺序。au

8、to：默认值。遵从其父对象：默认值。遵从其父对象number:无单位的整数值。可为负数无单位的整数值。可为负数说明：说明：较大较大 number 值的对象会覆盖在较小值的对象会覆盖在较小 number 值的对象之上。值的对象之上。如两个绝对定位对象的此属性具有同样的如两个绝对定位对象的此属性具有同样的 number 值，那么将值，那么将依据它们在依据它们在HTML文档中声明的顺序层叠。文档中声明的顺序层叠。此属性仅仅作用于此属性仅仅作用于 position 属性值为属性值为 relative 或或 absolute 的对的对象。象。五、命名锚点链接的应用五、命名锚点链接的应用定义：定义：是网页

9、制作中超级链接的一种，又叫命名锚记。命名锚记像是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。遍。命名锚点链接的应用：命名锚点链接的应用：1)命名锚点的作用：在同一页面内的不同位置进行跳转。命名锚点的作用：在同一页面内的不同位置进行跳转。2)给元素定义命名锚记名给元素定义命名锚记名语法：语法： 3)命名锚记连接命名锚记连接语法：语法：六、圆角切图六、圆角切图1、css 书写书写border-radius：左上角：左上角 右上角右上角 右下角右下角 左下角左下角border-radiu

10、s：左上角右下角：左上角右下角 右上角右上角 左下角左下角 (对角线对角线)border-top-left-radius：左上角：左上角border-top-right-radius：右上角：右上角border-bottom-left-radius：左下角：左下角border-bottom-right-radius：右下角：右下角2、切图拼接；、切图拼接；七、滚动条七、滚动条1、Overflow内容溢出时的设置内容溢出时的设置属性：属性：overflow 水平及垂直方向内容溢出时的设置水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置水平方向内容溢出时的设置 ove

11、rflow-y 垂直方向内容溢出时的设置垂直方向内容溢出时的设置以上三个属性设置的属性值：以上三个属性设置的属性值：visible、scroll、hidden、auto、visible 默认值，其中的内容无论是否超出范围都将被显示。默认值，其中的内容无论是否超出范围都将被显示。 hidden 效果与效果与visible相反。任何超出相反。任何超出“width”和和“height”的内的内容都会隐藏。容都会隐藏。 scroll 无论内容是否超越范围，都将显示滚动条。无论内容是否超越范围，都将显示滚动条。 auto 当内容超出范围时，显示滚动条，否则不显示。当内容超出范围时，显示滚动条，否则不显示

12、。应用应用:1、1）没有水平滚动条）没有水平滚动条:test2）没有垂直滚动条）没有垂直滚动条 test3）没有滚动条）没有滚动条 test4）自动显示滚动条）自动显示滚动条test2、自己定义滚动条的颜色、自己定义滚动条的颜色scrollbar-face-color(立体滚动条凸出部分的颜色立体滚动条凸出部分的颜色)scrollbar-highlight-color(滚动条背景条的颜色滚动条背景条的颜色)scrollbar-base-color(滚动条背景的亮光色，基底滚动条背景的亮光色，基底)scrollbar-arrow-color(上下按钮三角箭头的颜色上下按钮三角箭头的颜色)scro

13、llbar-shadow-color(立体滚动条阴影的颜色立体滚动条阴影的颜色)(滑动滚动条边滑动滚动条边框色框色,ie显示显示)scrollbar-dark-shadow-color(立体滚动条强阴影的颜色（浏览立体滚动条强阴影的颜色（浏览器不显示）器不显示）)以上适用与以上适用与、八、八、Flash和和marquee(滚动字幕滚动字幕)1、插入、插入flash1）语法：）语法：（其他浏览器识别）（其他浏览器识别） （ie浏览器识别）浏览器识别）说明：说明：flash源文件格式源文件格式.fla,导出影片为导出影片为.swf,创建播放器格式为创建播放器格式为.exe.2）将）将flash背景设置为透明背景设置为透明给给标记添加属性：标记添加属性：wmode=transparent3）IE中不显示中不显示flash,可做如下操作：可做如下操作：A.下载安装下载安装flash player;B.打开打开IE浏览器，选择工具菜单浏览器，选择工具菜单-Internet选项选项-安全安全-低。低。2、滚动字幕的应用：、滚动字幕的应用： 内容内容说明：说