好程序员web前端分享定位锚点透明

Posted 2021-11-27 gcghcxy

好程序员web前端分享定位锚点透明

学习目标

• 1、position 定位属性和属性值
• 2、定位元素的层级属性
• 3、包含块的概念和应用
• 4、锚点连接的语法和应用场景
• 5、透明属性的应用
• 6、扩展：Flash和marquee(滚动字幕)

一、position 定位属性和属性值

position 定位属性，检索对象的定位方式；
语法：position：static /absolute/relative/fixed/inherit/sticky/unset(未设置是inherit和initial的结合)/initial(最初的)
取值：
1、static：默认值，无特殊定位，对象遵循html原则；
2、absolute：绝对定位，将对象从文档流中完全拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据《浏览器》进行定位，而其层叠通过z-index属性定义
3、relative ：相对定位遵循正常的文档流，将依据right，top，left，bottom（相对定位）等属性在正常文档流中相对自身位置进行偏移；其层叠通过z-index属性定义.
4、fixed：(固定定位)，类似于绝对定位的方式，但是它的参照物是浏览器的“可视”窗口，且脱离标准文档流；

5、inherit:规定元素的定位方式继承父元素的position的属性值。

注：任何元素设置过脱离文档流的定位方式时，就有了块元素的显示特性

6、sticky：(粘性定位)

粘性定位，该定位是相对定位和固定定位的集合，在跨越特定阈值前为相对定位，之后为固定定位。

7、unset(未设置，是inherit和initial的结合)

当当前属性有继承性时，他解析的是继承(inherit)所得来的属性值 ，如果当前属性没有继承，解析的是初始（initial）值。

二、定位元素的层级属性

z-index : auto |number

设置定位对象的层叠顺序。
auto：默认值。遵循结构，后写的定位元素层的顺序靠上。
number:无单位的整数值。可为负数，数值越大，层的顺序越靠上

说明：
此属性仅仅作用于 position 属性值 relative 或 absolute,fixed 的对象。

三、包含块的概念及作用

包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；
默认状态下，body是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；

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

绝对和相对定位的区别

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

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

四、锚点连接的语法和应用场景

命名锚点的作用：在同一页面内的不同位置进行跳转。
锚点链接语法：
1)给元素定义命名锚记名
语法：<标记 id="命名锚记名"> </标记>
2)命名锚记连接
语法：<a href="#命名锚记名称">链接文本或图片</a>

五、透明写法

IE9以下浏览器写法：filter:alpha(opacity=value);取值范围 0-100
兼容其他浏览器写法：opacity:0.5;    (value的取值范围0-1 0.1,0.2,0.3-----0.9---1)

rgba(255,255,0,0.5)(最后一位值表示透明，取值范围0-1) 只支持IE8以上的浏览器

六、Flash和marquee(滚动字幕)

1、插入flash 
1）语法： 
<object>
<embed width="value" height="value" wmode="transparent" src="flash路径及全称"  ></embed>
</object> 
2）将flash背景设置为透明 
<embed wmode="transparent" /> 
给<embed>标记添加属性：wmode="transparent"
说明：flash源文件格式.fla, 
导出影片为.swf, 
创建播放器格式为.exe. 
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>

七、 CSS继承

概念：所谓继承，就是父元素的规则也会适用于子元素。继承得来的规则没有特殊性。

比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置，也都会变成红色。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-weight、text- decoration、text-transform.

块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承：border-collapse。

八、CSS层叠

概念：一个元素可能同时被多个css选择器或样式表选中，每个选择器及样式表都有一些css规则，这就是层叠。

这些规则有可能不矛盾的，自然这些规则将会同时起效，然而有些规则是相互冲突的。当发生冲突的时候必须选出一条最高特殊性(权重)的规则来应用。