今日内容:
1,position 定位属性和属性值
2, 定位元素的层级属性
3, 包含块的概念和应用
4, 锚点连接的语法和应用场景
5, 透明属性的应用
6, 扩展: Flash 和 marquee(滚动字幕)
一, position 定位属性和属性值
一, position 定位属性和属性值
position 定位属性, 检索对象的定位方式;
定位都脱离层.
语法: position:static /absolute/relative/fixed
absoluted/relative/fixed 对定位有效, 对层级属性 Z-index 有效.
取值:
1,static: 默认值, 无特殊定位, 对象遵循 html 原则;
2,absolute: 绝对定位, 将对象从文档流中脱离出来, 使用 top/right/left/bottom 等属性相对其最接近的一个并有定位设置的父元素 (祖先元素 | 祖先元素不包含叔叔级的) 进行绝对定位; 如果不存在这样的父对象, 则依据根元素 (HTML) 浏览器进行定位, 而其层叠通过 z-index 属性定义.
可以脱离当前的大容器, 并且不占位. 绝对定位脱离整层, float 脱离半层.
3,relative : 相对定位, 该对象的文档流位置不动, 将依据 right,top,left,bottom(相对定位)等属性在正常文档流中偏移位置; 其层叠通过 z-index 属性定义.
(一般给父层级添加 relative 属性值)
相对于自身位置进行偏移
元素设置: margin:0 auto 时:
(1)box 为相对定位时(相对自身), 在页面中居中.
(2)box 为绝对定位时(相对于根元素 HTML), 在页面中居左.
4,fixed:(固定定位)未支持, 对象定位遵从绝对定位方式(absolute); 但是要遵守一些规范(IE6 浏览器不支持此定位) ;
跟绝对定位一样的都是脱离文档流, 不占位, 并且永远相对于当前浏览器的可视窗口进行位置偏移.
二, 定位元素的层级属性
z-index : auto |number
检索或设置对象的层叠顺序.
auto: 默认值(0), 遵从其父对象.
number: 无单位的整数值. 可为负数, 上左为负值, 右下为正值.
没有设置 z-index 时, 根据结构顺序, 最后写的对象优先显示在上层, 设置后, 数值越大, 层越靠上;
结构在最后的, 加定位时层级最高.
说明:
较大数值的对象会覆盖在较小数值的对象之上. 如两个绝对定位对象的此属性具有同样的 number 值, 那么将依据它们在 HTML 文档中声明的顺序层叠.
此属性仅仅作用于 position 属性值为 relative 或 absolute,fixed 的对象.
三, 包含块的概念及作用
只有绝对定位 absoluted 有包含块
包含块是绝对定位的基础, 包含块就是为绝对定位元素提供坐标, 偏移和显示范围的参照物, 即确定绝对定位的偏移起点和百分比长度的参考;
默认状态下, body 是一个大的包含块, 所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的, 如果我们定义了包含元素为包含元素块以后, 对于被包含的绝对定位元素来说, 就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置.
定义元素为包含块: 给绝对定位元素的父元素添加声明 position:relative;
如果我们的父元素设置了 position:absolute; 那么子元素也会相对父元素来定义自己的位置.
距定位元素最近的并且带有定位属性的父元素, 是绝对定位元素的包含块, 为绝对定位元素提供坐标偏移和显示范围的参照物.
position:absolute; 和 position:relative; 可以让标签变成包含块
绝对和相对定位的区别
1, 参照物不同, 绝对定位 (absolute) 的参照物是包含块(父级), 相对定位的参照物是元素本身位置;
2, 绝对定位将对象从文档流中拖离出来因此不占据空间, 相对定位不破坏正常的文档流顺序无论是否进行移动, 元素仍然占据原来的空间.
四, 锚点连接的语法和应用场景
命名锚点链接的应用
定义: 是网页制作中超级链接的一种, 又叫命名锚记. 命名锚记像一个迅速定位器一样是一种页面内的超级链接, 运用相当普遍.
命名锚点的作用: 在同一页面内的不同位置进行跳转.
制作锚标记:
1, 给元素定义命名锚记名
语法:<标记 id="命名锚记名"> </ 标记>
2, 命名锚记连接
语法:<a href="# 命名锚记名称"></a>
五, 透明写法
IE 浏览器写法: filter:alpha(opacity=value); 取值范围 1-100
兼容其他浏览器写法: opacity:0.value;(value 的取值范围 0-1 0.1,0.2,0.3-----0.9---1)
用这种方法标签内的元素也变透明
background:rgba(r,g,b,0-1);
IE8 不支持 rgba 的写法.
六, Flash 和 marquee(滚动字幕)
1, 插入 flash
1)语法:
- <object width="value" height="value">
- <param name="movie" value="flash 路径及全称" />
- <embed width="value" height="value" src="flash 路径及全称">
- </embed>
- </object>
2)将 flash 背景设置为透明
<embed wmode="transparent" />
给 < embed > 标记添加属性: wmode="transparent"
说明: flash 源文件格式. fla,
导出影片为. swf,
创建播放器格式为. exe.
gif 格式:.gif
3)IE 中不显示 flash, 可做如下操作:
打开 IE 浏览器, 选择工具菜单 --Internet 选项 ---- 安全 ---- 低.
2, 滚动字幕的应用
- <marquee behavior(行为)="scroll(滚动)/alternate(晃动)" direction(方向)="up(从下向上)/down(从上向下)/left(从右向左)/right(从左向右)"
- scrollamount(滚动速度)="value" height="value(上下滚动范围)" width="" (左右滚动范围)>
内容
</marquee>
来源: http://www.jianshu.com/p/7255517d4b38