定位、CSS3的动画

一、网页定位

1、网页定位：大多数情况下，跟已有元素不相干，在某种情况下，会脱离标准文档流。

2、position属性

• static：默认值，静态的，没有定位，标准文档流布局。
• relative:相对定位
• absolute:绝对定位。
• fixed:固定定位。

3、relative:相对自身原有的位置进行偏移，原来的位置还是存在，并且占据位置。标准文档流布局。

偏移位置：top 上  right 由  bottom 下  left  左，  注意在偏移的位置是按照顺时针的方向，上右下左进行偏移。

语法：

position:relative;

top:-10px;    //和bottom:10px一样

注意：在往某个方向偏移时，可以理解为距离某个位置，也就是要反向思维。

规律：设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置 设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响 设置相对定位的盒子原来的位置会被保留下来

使用场景：一般相对定位很少自己单独使用，都是配合绝对定位使用，为绝对定位设置父级，而不会设置偏移量。

4、absolute:绝对定位本身位置不占据，脱离了标准文档流。

语法：

position:absolute;

left:10px;

注意：绝对定在写的时候，一般会找一个参照物，而这个参照物一般是父级元素。

规律：使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移 如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位 绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响 元素位置发生偏移后，它原来的位置不会被保留下来.

使用场景：一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景。

5、fixed:固定定位，类似于绝对定位，不过区别在于定位上，绝对定位时找父级元素，找不到在找窗口，而固定定位直接找浏览器窗口。它是依靠窗口定位，偏移量不会随着滚动条的移动而移动。

语法：

position：fixed;

right:10px;

注意：相对浏览器窗口来定位，偏移量不会随滚动条的移动而移动。

使用场景：一般是左右两边的广告，返回顶部图标等。

6、z-index属性

作用：调整元素定位时重叠层的上下位置。

z-index属性默认值为0。

opacity:x	x值为0~1，值越小越透明	opacity:0.4;
filter:alpha(opacity=x)	x值为0~100，值越小越透明	filter:alpha(opacity=40);

一般浏览器兼容都会把这两个属性都会加上。

二、CSS3动画

1、CSS3变形：是一些效果的集合。如平移、旋转、缩放、倾斜效果。

每个效果都可以称作为变形，它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。

2、语法:

transform:[transform-function] *;

注释：[] 里面可以设置变形函数，可以是一个，也可以是多个，中间以空格分开。

3、变形函数

• translate()：平移函数，基于X、Y坐标重新定位元素的位置
• scale()：缩放函数，可以使任意元素对象尺寸发生变化
• rotate()：旋转函数，取值是一个度数值
• skew()：倾斜函数，取值是一个度数值

位移：

translate(tx,ty);

注释：x轴移动的水平方向的长度，Y轴移动的是垂直的方向的长度。

缩放：

scale(sx,sy);

注释：sx是横向坐标（宽度）方向的缩放量，sy是纵向坐标（高度）方向的索放量。

倾斜：

skew(ax, ay)；

注释：水平方向（X轴）的倾斜角度，垂直方向（Y轴）的倾斜角度

旋转：

rotate(a);

注释：a是参数，使用单位是deg,参数a取正值时元素相对原来中心顺时针旋转.

注意：rotate( )函数只是旋转，而不会改变元素的形状

          skew( )函数是倾斜，元素不会旋转，会改变元素的形状

4、CSS3过渡  transition属性

浏览器兼容：

属  性  名	IE	Firefox	Chrome	Opera	Safari
transition	10+	4.0+	4.0+	10.5+	3.1+

语法：

transition:[transition-property  transition-duration  transition-timing-function   transition-delay ] 

注释：第一个是过渡或者动态模拟的CSSS属性，第二个是完成过渡所需要的时间，第三个是指定过渡函数，第四个延迟时间

5、过渡的伪类触发

伪类触发 ：hover ：active ：focus ：checked

媒体查询：通过@media属性判断设备的尺寸，方向等

JavaScript触发：用JavaScript脚本触发

6、CSS3动画

animation实现动画

主要由两个部分组成：

通过类似Flash动画的关键帧来声明一个动画，

在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

动画发生的操作（animation-fill-mode）：

forwards表示动画在结束后继续应用最后关键帧的位置

backwards表示会在向元素应用动画样式时迅速应用动画的初始帧

both表示元素动画同时具有forwards和backwards的效果