学习目标
- 1、position 定位属性和属性值
- 2、定位元素的层级属性
- 3、包含块的概念和应用
- 4、锚点连接的语法和应用场景
- 5、透明属性的应用
- 6、扩展：Flash和marquee(滚动字幕)
- 7、overflow中的滚动条
一、position 定位属性和属性值
position 定位属性，检索对象的定位方式；
语法：
position：static /absolute/relative/fixed
取值：
1、static：默认值，无特殊定位，对象遵循HTML原则；
2、absolute：相对于父级元素的绝对定位，浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。若父级都没有定位，则以html（根元素）。(层叠的顺序z-index:value)
3、relative ：是相对于默认位置的相对定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流】）
4、fixed：(固定定位)相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。
二、定位元素的层级属性
z-index : auto |number
检索或设置对象的层叠顺序。
auto：默认值。遵从其父对象
number:无单位的整数值。可为负数
没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；
说明：
1）较大 数值的对象会覆盖在较小 数值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。
此属性仅仅作用于 position 属性值 relative 或 absolute,fixed 的对象。
三、包含块的概念及作用
包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；
默认状态下，body是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；
如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。
绝对和相对定位的区别
1、参照物不同，绝对定位（absolute）的参照物是包含块（父级），相对定位的参照物是元素本身位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。
四、锚点连接的语法和应用场景
命名锚点链接的应用
定义：
是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。
命名锚点的作用：在同一页面内的不同位置进行跳转。
制作锚标记：
1)给元素定义命名锚记名
语法：<标记 id="命名锚记名">
2)命名锚记连接
语法：
五、透明写法
IE浏览器写法：
filter:alpha(opacity=value);取值范围 1-100
兼容其他浏览器写法：
opacity:0.value;(value的取值范围0-1 0.1,0.2,0.3-----0.9---1)
六、Flash和marquee(滚动字幕)
1、插入flash
1）语法：
2）将flash背景设置为透明
给
3）IE中不显示flash,可做如下操作：
A.下载安装flash player;
B.打开IE浏览器，选择工具菜单--Internet选项----安全----低。
2、滚动字幕的应用：
scrollamount（滚动速度）="value"height="value(上下滚动范围)"width=""(左右滚动范围)>
内容
七、overflow中的滚动条
1,Overflow内容溢出时的设置
属性：
overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置
以上三个属性设置的属性值：
visible、scroll、hidden、auto、
visible 默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll 无论内容是否超越范围，都将显示滚动条。
auto 当内容超出范围时，显示滚动条，否则不显示。
应用:
1）没有水平滚动条:
2）没有垂直滚动条
3）没有滚动条
4）自动显示滚动条
test
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; /*滚动条的基本颜色*/
}
微信公众号:Hi前端学习笔记
知乎专栏:前端入门知识录
