【前台进阶100天】Day06 定位|锚点|透明度

作者 : 开心源码 本文共2482个字,预计阅读时间需要7分钟 发布时间: 2022-05-13 共185人阅读

今日内容:

  • 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>

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 【前台进阶100天】Day06 定位|锚点|透明度

发表回复