css基础

浮动

float: left;

清除浮动（父级元素添加）

overflow: hidden;

相对定位

相对定位不脱标，定位值：left向右移；right向左移；top向下移；bottom向上移；负数表示相反的方向

position: relative;
left/right: 100px;
top/bottom: 100px;

绝对定位

绝对定位的对象脱离了标准文档流

position: absolute;  
left: 10px;  
top/bottom: 20px;  

绝对定位的盒子无视参考的盒子的padding

z-index控制层级数

过渡

transition-property: (过渡的对象);
transition-duration: (过渡的时间);
transition-timing-function: (过渡的曲线：如下
                                            linear: 线性
                                            ease: 减速
                                            ease-in: 加速
                                            ease-out: 减速
                                            ease-in-out: 先加速再减速);
transition-delay: (过渡延迟，多久以后执行过渡);

2D转换

1.缩放（scale）

transform: scale(x, y);
(x表示水平方向缩放的倍数， y表示垂直方向缩放的倍数， 
如果只写一个值表示等比例缩放，大于1表示放大， 小于1表示缩小， 不能为百分比)

 2.位移（translate）

transform: translate(水平位移， 垂直位移);
参数为百分比， 正值为向右和向上， 负值为向左和向下，如果只有一个值， 表示水平移动

3.旋转（rotate）

transform: rotate(角度);
（正值顺时针， 负值逆时针）

3D转换

1.旋转 rotateX， rotateY， rotateZ

transform: rotateX(360deg);（绕 X 轴旋转360度）
transform: rotateY(360deg);（绕 Y 轴旋转360度）
transform: rotateZ(360deg);（绕 Z 轴旋转360度）

2.移动 translateX， translateY， translateZ

transform: translateX(角度);(沿着X轴移动)
transform: translateY(角度);(沿着y轴移动)
transform: translateZ(角度);(沿着z轴移动)

3.透视 perspective

1.作为一个属性，设置给父元素，作用于所有3D转换的子元素

2.作为 transform 属性的一个值，做用于元素自身

perspective: 500px;

4.3D呈现 transform-style

3D元素构建是指某个图形由多个元素构成的，可以给这些元素的父元素设置

transform-style： preserve-3d，来使其变成一个真正的3D图形

动画

1.通过@keyframes定义动画；

2.将这段动画通过百分比，分割成多个节点，然后各节点中分别定义各属性

3.之后通过animation调用动画

定义动画：
@keyframes 动画名{
                 from{ 初始状态 }
                 to{ 结束状态 }
                 }
调用：
animation: 定义的动画名称 持续时间  执行次数  动画方向  运动曲线 延迟执行