1.变化 transform
属性：偏移 translate transform:translate(30px,40px); 比原来的位置右移30px，下移40px
transform:translateY(20px); 下移20px
缩放 scale transform:scale(3,4); 水平方向放大3倍，垂直方向放大4倍
transform:scaleY(3); 垂直方向放大3倍
旋转 rotate transform：rotate（50deg）; 顺时针旋转50度
倾斜 skew transform:skew（30deg）; 倾斜30度
参考点 transform-origin:right bottom 以右下点旋转
2.过渡 transition
transition:过渡对象 时间 速度 延迟时间
transition:scale(3,4) .7s linear 1s;
延迟1秒后，水平放大3倍垂直放大4倍的变化，在0.7秒内匀速变化
3.自定义动画
两种定义方式
第一种：背景色从红色变成绿色
@keyframes 自定义名字{
form{
background:red;
}
to{
background:green;
}
}
第二种: 根据设置百分比来控制变化，从红变蓝变绿
@keyframes 自定义名字{
0%{
background:red;
}
50%{
background:blue;
}
100%{
background:green;
}
}
调用方式：animation:自定义名字 3s linear 1s infinite alternate;
3s:变化时间
linear：匀速变化
1s：延迟1秒
infinite：循环
alternate：原路返回
4 媒体查询 响应式页面（根据尺寸不同的大小，可以调用不同的css）
两种写法
第一种：在link中查询
写几个独立css，在link中全部调用
例如：
<link rel="stylesheet" href="css1.css" media="all and (min-width:992px)">
<link rel="stylesheet" href="css2.css" media="all and (min-width:769px) and (max-width:991px)">
<link rel="stylesheet" href="css3.css" media="all and (max-width:768px)">
第二种：在css中查询
写一个css，在css里查询，各写各的样式
@media all and (min-width:992px){
body{
background: powderblue;
}
}
@media all and (min-width:769px) and (max-width:991px){
body{
background: darkseagreen;
}
}
@media all and (max-width:768px){
body{
background: yellow;
}
}
5.data自定义属性
格式：data-
<a href="" data-mail="zhangsan@qq.com">张三</a>
6.弹性盒子
display:flex;
display:inline-flex;
排列方式direction：
rtl 从左到右
row 横排
column 竖排
row-reverse 反着横排
column-reverse 反着竖排
内容对齐
justify-content（左右）：
flex-start 行头紧挨填充
flex-end 向行尾紧挨填充
center 居中紧挨填充
space-between 平均分布在一行
align-items（上下）：
flex-start 列头紧挨填充
flex-end 向列尾紧挨填充
center 居中紧挨填充
space-between 平均分布在一列
