一，垂直对齐方式

属性名：vertical-align

属性值：
默认情况下图片和文字是一个偏上一个偏下的情况。

原理：浏览器会把行内块和行内标签都当作文字处理，浏览器所有文字默认按照基线对齐。

这样导致图片 img 的底下有空白，转块级不按基线对齐，空白就消失了

基线：

这个属性，谁更大就给谁加。

二，过度transition

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果。

一般不同状态指的是，默认状态和鼠标悬停状态的切换。

属性名：transitior(复合属性)

属性值：过度的属性花费时间 (s)

提示：

过渡的属性可以是具体的CSS属性
过渡属性可以为all(俩个状态属性值不同的所有属性，都产生过渡效果)
transition设置给元素本身

三，透明度opacity

作用：设置整个元素的透明度 ( 包含背景和内容）

属性名：opacity

属性值：

0：完全透明
1：不透明
0-1之间的小数：半透明

四，光标类型cursor

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

属性值：

五，平面转换

作用：为元素添加动态效果，一般与过渡 transition配合使用。

概念：改变盒子在平面内的形态（位移，旋转，缩放，倾斜）

平面转换又叫2D 转换

属性名：transform

属性值：

5.1 平移效果

平移效果：translate(X 轴移动距离,Y 轴移动距离)

取值：
- 像素数值单位
- 百分比（参照盒子自身尺寸计算）
- 正代表向右(x)，下(y)，负代表向左(x)，上(y)
技巧：
- translate()只写一个值代表沿X轴移动
- 单独设置X或Y轴移动距离：translateX()，translateY()

5.2 旋转效果

旋转效果：rotate(旋转角度);

角度单位是deg
技巧：
- 取值正负代表旋转方向不同
- 取正，顺时针
- 取负，逆时针
改变转换原点：默认情况下，转换原点是盒子中心点。

属性名：transform-origin:水平方向原点位置垂直方向原点位置

取值：
- 方位名词：(left，top，right，bottom，center)
- 像素单位数值：
- 百分比

5.3 多重转换效果

多重转换效果：既包含平移又包含旋转就叫多重转换效果。

技巧：先平移再旋转。

transform: translate() rotate();

5.4 缩放效果

缩放效果：scale()

transform: scale(缩放倍数)
transform:scale(X轴缩放倍数,Y轴缩放倍数)
技巧：
- 通常，只为scale()设置一个值，表示X轴和Y轴等比例缩放
- 取值大于1表示放大，取值小于1表示缩小

5.5 倾斜效果

倾斜效果：transform: skew();

取值：角度度数deg

六，渐变

渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景

分类：

线性渐变：颜色变化呈一条直线。

径向渐变：颜色变化从中心点开始沿四周变化。

6.1 线性渐变

写法：background-image: linear-gradient()

background-image: linear-gradient(
	渐变方向,
	颜色1 终点位置,
	颜色2 终点位置,
	...
);

渐变方向的取值：

to 方位名词
角度度数deg

终点位置：百分比

这俩个值都有默认值，可不写。

6.2 径向渐变

作用：给按钮添加高光效果

写法：background-image: radial-gradient()

background-image: radial-gradient(
	半径 at 圆心垂直方向位置 圆心水平方向位置,
	颜色1 终点位置,
	颜色2 终点位置,
	...
);

取值：

半径可以是2条，此时为椭圆
圆心位置取值：像素单位，百分比，方位名词

七，空间转换

7.1 立体呈现

作用：设置元素的子元素是位于3D 空间中还是平面中，这个属性加给父级元素
属性名: transform-style

属性值：

flat：子级处于平面中
preserve-3d：子级处于3D空间。

呈现立体图形步骤：

父元素添加transform-style:preserve-3d;
子级定位（子绝父相）
调整盒子的位置（位移或旋转）

立方体每个面都有独立的坐标轴，互不影响。

空间：是从坐标轴角度定义的 X、Y 和 Z三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。

空间转换也叫 3D 转换

7.2 空间平移

属性：

transform: translate3d(x,y,z);
transform: translateX();
transform: translateY();
transform: translateZ();

取值：（正负均可）

像素单位数值
百分比（参照盒子自身尺寸计算）

7.3 视距 perspective

默认情况下，Z 轴的平移是看不见效果的，需要配合属性视距才能生效。

作用：指定了观察者与Z=0 平面的距离，为元素添加透视效果

透视效果: 近大远小、近实远虚

属性：（添加给父级，取值范围：800-1200）perspective: 视距

7.4 旋转

属性：绕Z 轴旋转

transform: rotateZ(旋转角度deg);

这个和平面旋转的效果是一样的，因为 Z 轴旋转就是盒子中心点旋转。

属性：绕 X 轴旋转

transform: rotateX(旋转角度deg);

属性：绕Y 轴旋转

transform: rotateY(旋转角度deg);

属性：空间旋转

用来设置自定义旋转轴的位置及旋转的角度，x，y，z 取值为 0-1 之间的数字。

transform: rotate3d(x,y,z,角度度数);

左手法则：根据旋转方向确定取值正负。

先确定图片根据哪个方向转动，然后左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向

7.5 缩放

属性：

八，动画

过渡：实现两个状态间的变化过程

动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

8.1 动画实现步骤

定义动画

定义动画有俩种写法：

设置 2 个状态的动画

@keyframes 动画名称{
    from{}
    to{}
}

设置多个状态的动画

@keyframes 动画名称{
    0%{}
    10%{}
    ...
    100%{}
}

使用动画

给要使用动画的标签加上属性
```
animation: 动画名称 动画花费时间;
```

8.2 animation属性

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

提示：

动画名称和动画时长必须赋值
取值不分先后顺序
如果有两个时间值，第一个时间表示动画时长，第二个表示延迟时间

速度曲线：

匀速运动：linear
分步运动：steps(数值)一般用来配合精灵图，实现精灵动画使用。

重复次数： 一直重复就使用：infinite

动画方向： 反向：alternate

动画执行完毕时状态：

停止在结束状态：forwards
停止在开始状态：backwards(默认)

animation 拆分属性：

九，其他属性

9.1 object-fit

作用：对图片进行剪切，保留原始比例

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

常用属性值：

fill：默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain：保持原有尺寸比例。内容被缩放。
cover：保持原有尺寸比例。但部分内容可能被剪切
none：保留原有元素内容的长度和宽度，也就是说内容不会被重置。

CSS高级

一， 垂直对齐方式