第6天笔记定位

position 定位属性，检索对象的定位方式；

语法：position：static /absolute/relative/fixed

取值：

1、static：默认值，无特殊定位，对象遵循HTML原则；

2、absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据html(根元素)，而其层叠通过z-index属性定义；

3、relative ：相对定位，对象不可层叠，将依据right，top，left，bottom（相对定位）

等属性在正常文档流中偏移位置(相对自己原来的位置偏移)。

4、fixed：固定定位，对象定位遵从绝对定位方式（absolute）；但是要遵守一些规范（IE6浏览器不支持此定位）根据浏览器的窗口来定义自己的位置。

包含块的概念及作用包含块是绝对定位的基础，包含块就是为决定定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考；

默认状态下，html是一个大的包含块，所有绝对定位的元素都是根据根元素来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；

如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。

绝对定位和相对定位的区别

1、参照物不同绝对定位的参照物是包含块，相对定位的参照物是元素本身位置；

2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

定位元素层叠属性：

z-index : auto | number

检索或设置对象的层叠顺序。

auto：默认值。遵从其父对象

number:无单位的整数值。可为负数

说明：

1）较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。此属性仅仅作用于 position 属性值为 relative 或 absolute,fixed 的对象。

命名锚点链接的应用

定义：是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。

命名锚点链接的应用：

1)命名锚点的作用：在同一页面内的不同位置进行跳转。

2)给元素定义命名锚记名

语法：<标记 id="命名锚记名"> </标记>

3)命名锚记连接

语法：<a href="#命名锚记名称"></a>

Flash和marquee(滚动字幕)

1、插入flash

1）语法：

2）将flash背景设置为透明

给<embed>标记添加属性：wmode="transparent"

说明：flash源文件格式.fla,

导出影片为.swf,

创建播放器格式为.exe.

gif格式：.gif

3）IE中不显示flash,可做如下操作：

A.下载安装flash player;

B.打开IE浏览器，选择工具菜单--Internet选项----安全----低。

2、滚动字幕的应用：

<marquee

behavior（行为）="scroll(滚动)/alternate（晃动）"direction（方向）="up(从下向上)/down（从上向下）/left（从右向左）/right（从左向右）"

scrollamount（滚动速度）="value"height="value(上下滚动范围)"width=""(左右滚动范围)> 内容 </marquee>

滚动条

1,Overflow内容溢出时的设置

属性：

overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置

以上三个属性设置的属性值：

visible、scroll、hidden、auto、

visible 默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。

hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。

scroll 无论内容是否超越范围，都将显示滚动条。

auto 当内容超出范围时，显示滚动条，否则不显示。

应用:

1）没有水平滚动条: <div style="overflow-x:hidden">test</div>

2）没有垂直滚动条 <div style="overflow-y:hidden">test</div>

3）没有滚动条 <div style="overflow-x:hidden;overflow-y:hidden" 或

style="overflow:hidden">test</div>

4）自动显示滚动条 <div style="height:100px;width:100px;overflow:auto;">test</div>

2、自己定义滚动条的颜色

Body { scrollbar-arrow-color: #f4ae21; /图6,三角箭头的颜色/ scrollbar-face-color: #333; /图5,立体滚动条的颜色/ scrollbar-3dlight-color: #666; /图1,立体滚动条亮边的颜色/ scrollbar-highlight-color: #666; /图2,滚动条空白部分的颜色/ scrollbar-shadow-color: #999; /图3,立体滚动条阴影的颜色/ scrollbar-darkshadow-color: #666; /图4,立体滚动条强阴影的颜色/ scrollbar-track-color: #666; /图7,立体滚动条背景颜色/

scrollbar-base-color:#f8f8f8; /滚动条的基本颜色/

}