3.28 定位流(二) 2D转换模块

3. 固定定位

固定定位脱离标准流,不会占用标准流中的空间
固定定位不区分块级,行内和行内块级元素
固定定位会让元素不随着滚动条滚动
IE6不支持固定定位

4. 静态定位(不学习)

5. z-index

默认情况下所有的元素都有一个默认的z-index属性,取值为0,z-index是用来控制定位流元素的覆盖关系的,想使用z-index必须设置定位属性

默认情况下,定位流元素是会覆盖标准流的元素的
默认情况下,定位流元素后面编写的会盖住前面编写的
如果定位流元素设置了z-index属性,那么谁的z-index属性比较大,谁就显示在上面

注意:从父现象

如果两个元素的父元素都没有设置z-index属性,那么谁的z-index属性大,谁就在上面
如果两个元素的父元素都设置有z-index属性,那么子元素的z-index属性就会失效,谁的父元素z-index属性大,谁就在上面

二、a标签的伪类选择器

a标签的伪类选择器是专门用来修改a标签不同状态时的样式
a:link{ }:用来修改a标签从未被访问过的样式
a:hover{ }:用来修改a标签鼠标悬停时的样式
a:active{ }:用来修改a标签点击时的样式
a:visited{ }:用来修改a标签被访问过的样式

注意:

a标签的伪类选择器可以单独出现
a标签的伪类选择器如果一起出现,要遵循严格的顺序:link>visited>hover>actived(爱恨原则:love hate)
连写:a{ }可以同时控制link和visited的颜色
在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面
在企业开发中和a标签盒子相关的属性都写在标签选择器中(显示模式/宽高/padding/margin)
在企业开发中和a标签文字/背景相关的都写在伪类选择器中
:hover{ }这个伪类选择器可以用在任何标签里

三、过渡模块

transition-property: 属性1, 属性2;:告诉系统哪个属性需要执行过渡效果
transition-duration: 时长1, 时长2;:告诉系统属性需要执行过渡效果
transition-delay: 时长1, 时长2;:规定过渡效果何时开始,默认值是0
transition-timing-function: linear(匀速), ease(逐渐慢下来), ease-in(加速), ease-out(减速), ease-in-out(先加速后减速);:规定过渡效果的运动速度,默认为linear匀速
连写:transition: property duration timing-function delay, property duration timing-function delay;

必备三要素:

必须要有属性发生变化
必须告诉系统哪个属性需要执行过渡效果
必须告诉系统执行过渡效果持续时长

注意:

连写时可以同时设置多个属性,中间用空格隔开
连写的时候可以省略后面的两个参数
如果多个属性运动的数值都一样,可以简写为transition: all duration;

编写过渡模块的套路:

先编写基本的界面
修改需要修改的属性
回过头给被修改属性的那个元素添加过渡效果

四、2D转换模块

transform: rotate(ndeg);:控制元素旋转,deg角度,默认情况下元素都是以自己的中心点作为参考来旋转,可以通过形变中心点属性来修改参考点
transform-origin: npx npx/50% 50%/center center:第一个参数:水平方向,第二个参数:垂直方向,取值可以为具体像素,百分比和特殊关键字,两方向取值一样时可以只写一个
transform: rotateX/Y/Z(ndeg);:想围绕哪个轴转就写上哪个轴,默认围绕Z轴

坐标系

perspective: npx;:透视属性控制近大远小效果,值为距离元素的距离,一定要添加到它的父元素上面

近大远小

transform: translate(npx, npx);:控制元素平移,第一个参数:水平方向,第二个参数:垂直方向
transform: scale(n, n);:控制元素缩放,第一个参数:水平方向,第二个参数:垂直方向,如果取值等于1,代表不变.如果取值大于1,代表放大.如果取值小于1,代表缩小.
连写:transform: rotate(ndeg) translate(npx, npx) scale(n, n);:连写时各属性用空格隔开
盒子阴影:box-shadow: 水平偏移垂直偏移模糊度阴影扩展阴影颜色内外阴影;,默认为外阴影,默认阴影颜色为内容的颜色,快速添加阴影只需编写三个参数即可(水平偏移垂直偏移模糊度)
文字阴影:text-shadow: 水平偏移垂直偏移模糊度阴影扩展;,也可以只写三个元素
不透明级别:opacity:0-1;设置元素的不透明级别,0为透明,1为不透明