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为不透明
网友评论