一、网页定位
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的效果