Cascading style sheets 层叠样式表，级联样式表，简称样式表
对页面中html元素进行美化
css是解释性语言
从左到右，从上到下执行
继承性
层叠性
优先级
如果多个样式作用到一个元素上时，样式属性就会发生冲突，就按照默认样式的优先级去应用
默认的优先级
手动调整优先级
使用!important关键词
如果一个样式使用!important的关键字，直接获取最高优先级，其他样式不会覆盖他
h5{
color:red!important;
}
<div style="color: brown;">我是内联样式</div>
在
head标签
中，创建
style标签
在style中定义样式
选择器{样式声明；}
选择器：规范了页面中哪些元素能够使用定义好的样式
.container{
color:red!important;
}
注意，内部样式可以重用，但是有局限性，内部样式只能在本页面中使用，项目中使用比较少，主要在学习和测试的时候使用
单独创建一个css文件
在html的head中使用link引入外部css文件
// 引入的文件名
<link rel="stylesheet" href="my.css">
// 引入的文件跟当前页面的关系
*{样式声明;}
通用选择器的效率极低
*{margin:0; padding:0}
所有元素内外边距清零
P{}
div{}
…
#id值{}
<el id=“id值”>
.类名{}
<el class=”类名”></el>
<any class=”类名 类名 类名 。。。”></any>
元素选择器.类选择器{样式声明}
类选择器.类选择器{样式声明}
选择器1,选择器2,选择器3…{样式声明}
逗号分割
选择器1 选择器2 选择器3…{样式声明}
空格分隔
通过子代关系，匹配元素
子代：一级嵌套
后代选择器和子代选择器可以相互嵌套使用
div > p span{color:red}
div>span{color:blue}
div p >span{color:red}
权值：表示当前选择器的重要程度，权值越大优先级越高
*
通用选择器 0
权值的特点：
<meta name="viewport" content="width=device-width, initial-scale=1">
img{max-width:100%}
,根据不同的分辨率加载不同的图片
【面试题】
em和rem的区别：
em相对于父元素设置值的倍数 1.5em
rem相对于html元素设置值的倍数，html里设置font-size=16px，下面所有子元素或后代元素的字体大小统一设置1rem，即为16px。
所有的块级元素都可以设置尺寸
行内元素设置宽高无效
行内块 input
自带宽高属性的元素，可以设置尺寸 img table
当内容较大，元素区域较小，就会发生溢出效果
默认溢出是纵向溢出
如果父元素套子元素，父元素的宽<子元素的宽，设置横向溢出
overflow:默认缺省值 visible，溢出部分可见
hidden 溢出部分隐藏
scroll 滚动条 溢不溢出都存在
auto 可以溢出的方向添加滚动条
overflow-x:控制x轴的滚动条
overflow-y:控制y轴的滚动条
边框的属性—简写方式
border：width style color
同时设置4个方向
width:边框的宽度
style:边框的样式
solid实线
dotted点
dashed虚线
double 双实线
color:边框的颜色 /transparent 透明
最简方式: border:style;
取消边框：border:0;none;
单边定义边框属性
border-right/top/bottom/left ：width style color
// 例1
#d1{
width:0;
height:0;
border-top:10px solid #f00;
/* 设置为透明 */
border-right:10px solid transparent;
border-left:10px solid #f00;
border-bottom:10px solid #f00;
}
单属性定义
border-width：
border-style：
border-bottom：
单边单属性
border-top/right/bottom/left-wdith/style/color
border-radius
取值：1.以px为单位的数字
2.%
单角定义：需要两条边
border-top/bottom-left/right-radius:
border-top-left:
border-bottom-right:
举例
#d4{
width:200px;
height:200px;
border:5px solid orange;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
}
box-shadow
：h-shadow v-shadow blur spread color （inset）
h-shadow 水平方向的偏移量
v-shadow 垂直方向的偏移量
blur 阴影的模糊距离
spread 阴影的尺寸
color 阴影的颜色 默认黑色
inset 内部阴影
最简方式：box-shadow：h-shadow v-shadow；
举例
#d7{
width:200px;
height:200px;
border-radius:50%;
background-color:#fff;
box-shadow:0px 108px 0px 0px #f00 inset;
}
outline：width style color
边框的边框，绘制于边框外的线条
outline:0 去除轮廓
outline-width：5px;
outline-style:
outline-color
【注意】 轮廓可以有单属性，但是没有单边的定义
margin
改变外边距，元素有位移效果
语法
margin:v1；// 同时设置4个方向的外边距
margin-top
margin-right
margin-bottom
margin-left
取值： 1.以px为单位的数字
2.%都是按照父元素宽度的百分比
3.auto 对上下外边距无效
让块级元素水平居中
Auto只对设置了宽度的块级元素生效
2.简写方式
margin：v1 //同时设置四个方向的外边距
margin：v1 v2 // v1:上下 v2 左右
margin：0 auto // 让块级元素水平居中 margin：20px auto
margin：v1 v2 v3 // v1:上 v2:左右 v3:下
margin：v1 v2 v3 v4 // v1:上 v2:右 v3:下 v4:左
外边距的颜色是透明的
外边距的合并
关于块级元素，行内元素，行内块元素的完整总结
自带外边距的元素
外边距的溢出
在特殊的情况下，为子元素添加上外边距，会作用到父元素上
特殊情况：1.父元素没有上边框
2.子元素的内容区域的上沿，与父元素内容区域的上沿重合
解决方案：1.给父元素设置上边框 弊端，增加了父元素实际的占地高度
2.给父元素增加上内边距 弊端，增加了父元素实际的占地高度
3.给父元素设置：overflow：hidden/auto 弊端:不能溢出显示
4.给父元素添加一个大儿子，空的table
（table可以使父元素和子元素分离，用户看不出来）
padding
改变内边距，感觉是改变了元素的大小,但实际，元素内容区域没有变，变化的是边框到内容区域之间的距离,内边距的颜色同元素背景色,使用场合：把元素撑开
语法
padding：v1 //设置4个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
取值：1.以px为单位的数字
2.%都是父元素宽度的百分比
3.padding没有auto
2.简写方式
Padding：v1 //设置4个方向内边距
Padding：v1 v2 //上下，左右
Padding：v1 v2 v3 //上 左右 下
Padding：v1 v2 v3 v4 //上右下左
举例 搜索框撑大
input{
outline:0;
border-color:#0aa1ed;
padding:10px 20px
}
默认盒子计算宽度
左外边距+左边框+左内边距+设置width+右内边距+右边距+右外边距
改变当前原色盒子模型的计算方式：
box-sizing
box-sizing：content-box // 默认
border-box // 左外边距+设置widith+右外边距
（设置width包含了，内容区域宽度+左右边框+左右内边距）
一个独立渲染的区域，内部不影响外部，外部也不会侵入内部。
特点：BFC是一个元素，他会永远的包裹内部的每一个元素，把外部的元素隔绝在外
内部块元素在垂直方向，独占一行，由上到下挨个排列
块元素在垂直方向的总距离由:内容+内边距+边距+外边距
区域内块元素垂直方向的margin会重叠(大吞小)，左右会叠加
float不是none
position值不是static/relative
display值inline-block table flex inline-flex
overflow的值不是visible
3个方向
1. 给父元素设置固定的宽高，如此代码没有复用性，所以是不好的解决方法
2. 让父元素形成一个BFC区域，比如让父元素也浮动，或者给父元素添加display:table，或者给父元素添加overflow：hidden等方式，但是每个方式都会带来其他的问题。比如父元素的浮动会影响后续的页面布局；设置display：table会有浏览器的兼容问题，有的浏览器会默认table的高度在不设置或没有tr td作支撑的时候为0，overflow：hidden有的时候需要溢出元素显示出来
3. 给内部元素添加clear：both 方式有2：其一，在最后添加空元素，但是会破坏dom结构，不是很友好，其二使用伪类方式，父元素::after{content…}视作最完美的解决方式。
把其中一个元素设置成BFC独立渲染区域，具体做法是给一个元素外面再包一层大div,给大div设置BFC，比如overflow:hidden,这样外部元素和内部元素互相不影响，两个margin就可以叠加。或者给上方的元素添加一个大div，使用伪类给div的子元素添加一个尾部元素设置成display：table，这样可以形成一个BFC，是上方元素和下方元素隔绝互不影响
分3个大方向
方向1：BFC相关的
方式1：给父元素设置overflow:hidden，让父元素形成一个BFC区域，缺点是子元素没办法溢出
方式2：在子元素的前面，父元素的里面添加空的table，由于table是BFC区域，所以子元素的外边距转移不出去，从而解决问题。但是如此改变了dom结构，不够友好，所以更多的会使用方式3
方向2：使用边框
给父元素添加边框可以解决问题，但是会带来新的问题，边框颜色会影响页面效果，解决：设置透明度。 边框会影响页面布局，解决=>box-sizing：border-box
方向3：使用父元素的padding-top代替子元素的margin-top不好，会改变整体的高度
background
背景颜色
background-color：#fff;
背景图片
background-image：url(07.png);
背景图片平铺
background-repeat:
背景图片的定位
background-position:
背景图片的尺寸
background-size:
取值：1个值，同时设置宽高 ; 2个值，分别设置宽高
单位：1. 以px为单位的数字 2. %
cover 让背景图充满整个容器，哪怕图片显示不全，也没关系
contain 让背景图完全的在容器中显示(等比缩小)，哪怕容器有空白也没关系
背景图片的固定
background-attachment：
背景的简写方式
background：color image repeat attachment position;
gradient
多种颜色，平缓变化的一种显示效果。
色标：一种颜色，以及这种颜色出现的位置
一个渐变效果最少有两个色标
linear-gradient()
background-image：linear-gradient(to bottom,#f00 0%,#0ff 100%)
方向 色标1 色标2
方向： 1.定义重点：to bottom
2.使用角度 deg为正 顺时针转 deg为负 逆时针转 0deg == to top
45deg
90deg==to right
180deg==to bottom
270deg==to left
色标： 1.颜色 %
2.颜色 px
3.只写颜色 不写位置，会把颜色平局分配
background-image:linear-gradient(to right,#000, #0ff);（简写）
0% 100%
radial-gradient()
background-image:radial-gradient(半径 at 圆心x 圆心y，色标1。。。。。)
半径的取值：以px为单位的数字
圆心的取值：1关键字 x:left/center/right y:top/center/bottom
2.x% y%
3.xpx ypx
色标：1.颜色% （半径的%）
2.颜色 px （渐变效果与半径无关（半径必须>0））。
background-image:repeating-linear-gradient(方向,色标1，色标2…)
background-image:repeating-radial-gradient(半径 at 圆心x 圆心y,色标1，色标2,,,,)
-ms
-ie
-0- opera
-moz- firefox
-webkit- safari
设置字号
font-size：
px 为单位的数字
pt 为单位的数字
em/rem 为单位的数字
设置字体的类型
font-family:""
取值：电脑中存在的字体
双引号可加可不加
可以取多个值，应对不同client的电脑中存在的字体
font-family:字体1,字体2...浏览器会从第一个开始找，找到电脑中存在为止
font-family:黑体,chiller,jokerman,"mo boil";
设置字体的加粗
font-weight
取值：1.关键词 bold bolder normal lighter b标签 默认是bold
2.无单位的数字，必须是100的整倍数,最大值1000
400 ===== normal
700 ===== bold
设置字体的样式
font-style：normal/italic(斜体)
em标签默认的是italic
设置小型大写字母
font-variant:small-caps
字体简写方式
font:style variant weight size family;
font:size family;
文本颜色
color:合法颜色值
文本水平对齐方式
text-align：right /left/center/justify(两端对齐）
文本的垂直对齐方式
Vertical-align:
取值：
在table tr td/th 使用 top/middle/bottom
在img中使用 默认值 baseline（基线）/top/middle/bottom是控制图片前后行内元素与img的对齐方式，img本身不动
文本行高
line-height
如果行高大于字体本身的大小
那么该行文本将在指定的行高内，成垂直居中的方式显示。
line-height：
取值：
1.通常把line-height设置为与容器一样高度，这样文本就可以在容器中垂直居中。但是，对于超过一行的文本不适用
2.行高可以取值为无单位数字，意味着行高是字号的多少倍
文本的线条修饰
text-decoration:
text-decoration: underline 下划线
overline 上划线
line-through 删除线
none 无划线
项目中使用最多：text-decoration:none;去掉 a 标签的下划线
文本的首行缩进
text-indent:
text-indent
取值：以px为单位的数字
文本阴影
text-shadow
text-shadow：h-shadow v-shadow blur color
水平 垂直 模糊 颜色
边框的边距
border-spacing:
取值 以px为单位的数字
一个值，同时设置x轴和y轴的边框边距
两个值，分别设置x轴和y轴的边框边距
只有在border-collapse：separate边框分离的状态下才生效
边框的合并
border-collapse
默认值 separate 边框分离状态
collapse 边框合并
标题的位置
caption-side
caption-side：bottom
caption-side:top
设置表格的显示规则
table-layout:
默认值 auto 自动表格布局，列的尺寸，由内容决定
fixed 固定表格布局，永远以设置的值为准
position
设置元素在页面中的位置
float
float：left 让元素浮动后，停靠在父元素的左侧，或者其他已浮动元素的后面
right 让元素浮动后，停靠在父元素的右侧，或者其他已浮动元素的后面
none 无任何浮动效果
浮动的特点:
1.元素一旦浮动，就会脱离文档流（不占用空间，后面的元素会上前补位）
2.浮动元素会停靠在父元素的左边或者右边，或者其他已浮动元素的边缘
3.父元素横向显示不下所有的浮动元素，显示不下的浮动元素会自动换行
4.浮动，解决多个块级元素横向显示的问题
【总结】 元素脱离文档流，肯定会发生几件事情
clear
浮动元素带来的影响：之前元素一旦浮动，后续不浮动的块级元素会上前补位。
clear：left 清除左浮动带来的影响
right 清除右浮动带来的影响
both 同时清除左和右浮动带来的影响
postion：
取值：默认值 static静态（默认文档流）
relative 相对定位
absolute 绝对定位
fixed 固定定位
当一个元素被position修饰，并且取值为relative/absolute/fixed其中一种,那么这个元素称为已定位元素
当一个元素是已定位元素，就解锁了四个偏移属性Top/left/right/bottom,距离顶端，左侧，右侧，底部得距离
// 注意：当left和right冲突，以left为准，当top和bottom冲突，以top为准。
相对定位
postion:relative;
postion：relative 配合4个偏移属性，可以让元素移动到页面中得任何位置。
相对定位，元素不脱离文档流
偏移属性都设置，优先左和上
相对自己原来的位置
相对定位的元素不会影响周围的其他的元素
如果一个元素只设置position：relative；不设置偏移属性，或者偏移属性为0。导致这个元素跟没有设置一样。
使用相对定位的时机：
1.元素位置微调，类似于margin
2.相对定位会作为绝对定位的祖先级元素
绝对定位
postion：absolute;
postion：absolute；
绝对定位是脱离文档流的
绝对定位，如果所有的祖先级元素都不是已定位元素，相对于body左上角偏移。否则，相对于离自己最近的，已定位的，祖 先级元素偏移
固定定位
position:fixed;
position:fixed 配合偏移量
将元素固定在页面的某个位置,不会随着滚动条的滚动发生位置变化
一直固定在可视区域中
特点：脱离文档流，位置相对于body左上角初始化
堆叠顺序
z-index：
z-index：
只有已定位元素，可以设置堆叠顺序
如果没有设置堆叠顺序，后定位的元素，堆叠顺序比先定位的元素高
（先后是按照html的代码顺序） 默认堆叠顺序都不超过1。
浮动和定位的脱离文档流，不是一个体系，不能比较。定位是压着浮动的。
堆叠的最大值：2^31 一般情况下，1000以内就可以。
堆叠顺序对父子级元素无效，子元素永远在父元素的上面。
display:
设置 元素在页面中的表现形式（块级，行内，行内块）
display:
取值：block // 让元素显示为块级
inline // 让元素显示为行内
inline-block // 让元素显示为行内块
table // 让元素显示为table
none // 隐藏，脱离文档面，不占页面空间
visibility
visibility：
取值：默认值 visible
隐藏 hidden
【注】visibility：hidden和display：none的隐藏有什么区别？
display: none;脱离文档流,不占页面空间的
visibility: hidden 看不见，但是依然占据页面空间
opacity
透明度
取值：0~1 0全透明 1不透明
rgba只改变当前元素的当前颜色的透明度
opacity会把元素以及元素内部的所有颜色相关都变为透明
cursor:
默认值：default;箭头
pointer;小手
text;文本输入
wait;等待加载
help;帮助 问号
crosshair 十字
list-style-type
列表的标识类型
取值：
desc 默认值
circle 空心圆
square 实心小方块
none 去掉列表标识
list-style-image：url()
列表项图标
list-style-position
列表项的位置
默认值 outside 在li外边，ul的左内边距
inside 在li内部
list-style：type url() position
常用方式：list-style：none；去除列表项
兄弟元素：具备同样父级元素的平级元素之间，称为兄弟元素
兄弟选择器，只能往后找，不能往前找
相邻兄弟选择器
selector+selector{}
获取挨在某个选择器后面的兄弟元素
案例： .c相邻的h元素变红
.c+h1{
color:red;
}
通用兄弟选择器
selector~selector{}
获取某个选择器后面所有符合条件的兄弟元素
案例：#d1后的所有.c元素变红
#d1~.c{
color:red
}
[attr]{}
匹配带有attr属性的元素
[attr=value]{}
匹配带有attr属性并且值为value的元素
elem[attr]{}
匹配带有attr属性的elem元素
elem[attr1][attr2]...{}
匹配带有attr1属性，attr2属性，…的元素
案例：匹配dic元素有class和id属性的样式
div[class][id]{
color:red
}
目标伪类
:target{}
让被激活的锚点应用此样式
结构伪类
Selector：first-child{}
select父元素的第一个孩子，同时这个还得符合selector
Selector：last-child{}
select父元素的最后一个孩子，同时这个还得符合selector
Selector：nth-child(n){}
n从1开始，这个还得符合selector
:empty{}
匹配内部没有任何元素标签（没有任何元素：内部不能有其他元素，本文，符号）
:only-child{}
匹配属于其父元素的唯一子元素
否定伪类
:not(selector){}
将所有满足selector条件的元素都排除
方法：在正常的选择器上添加否定伪类:not( )
案例：
tr:nth-child(3)>td:not(:nth-child(2)),tr:not(:nth-child(3)){
background:#f0f;
}
匹配元素的一部分
::first-letter
h4写法 /
:first-letter
h5写法
::first-line
h4写法 /
:first-line
h5写法
::selection
只能修改背景颜色和字体颜色
伪元素,内容生成,使用css动态来生成html结构
::before
或者
:before
在内容区域中，最前面添加一个假的元素
<style>
p:before {
content:"深情表白";
display:block;
width:200px;
height:200px;
background:#0ff;
}
</style>
::after
或者
:after
在内容区域中，最后面添加一个假的元素
content
给内容生成添加内容，只能添加文本
内容生成能解决的问题：
解决外边距溢出问题
```
<div id="d1">
<div id="d2"></div>
</div>
#d1{
width:200px;
height:200px;
background:#ff0;
}
#d2{
margin-top:20px;
width:100px;
height:200px;
background:#0ff
}
#d1:before{
content:"",
display:table
}
```
高度坍塌
<div id="parent">
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
</div>
#parent{
border:3px solid #f00;
}
#d3,#d4,#d5{
width:100px;
height:100px;
float:left;
}
#d3{
background:#ff0;
}
#d4{
background:red;
}
#d5{
background:green;
}
#parent::after{
content:"",
display:block;
clear:both
}
display:flex
容器（父）
项目（子）
主轴-四条 （类似于对称轴）
交叉轴（2条）
display：flex;
让块级元素变为容器
display：inline-flex;
让行内元素变为容器
【注意：】
1.元素设置为容器之后，元素的text-align，vertival-align失效，只能使用主轴和交叉轴的属性来设置子元素的对齐方式。
2.弹性项目，浮动，清楚浮动失效。
主轴方向
flex-direction:
row 默认值 主轴是x轴，主轴起点左侧
row-reverse主轴是x轴，主轴起点右侧
column 主轴是y轴，主轴起点为顶部
column-reverse 主轴是y轴，主轴起点是底部
是否换行
flex-wrap：
nowrap 默认值，项目不换行
wrap 换行（）默认向下换行）
wrap-reverse 换行并反转 （向上换行
上面两个属性的简写
flow-flow
flex-flow：direction wrap
例如：row-reverse wrap
项目在主轴上的排列方式
justify-content:
flex-start 默认值，主轴起点对齐
flex-end 主轴终点对齐
flex-end 主轴重点对齐
center 主轴中间对齐
space-around 每个项目左右间距一致
space-between 左右两端对齐
项目在交叉轴上的排列方式
align-items
flex-start 默认值 交叉轴起点对齐
flext-end 交叉轴终点对齐
center 交叉轴中间对齐
stretch 前提，项目不设置高度，项目沾满交叉轴的所有空间
order
定义项目的排列顺序
定义项目的排列顺序，值越小，越靠近主轴起点
默认值是0
取值：无单位数字
flew-grow
当主轴有足够大的剩余空间时，项目将按照设置的增长速度变大。
取值：无单位数字
0 默认值，不变大
>0 值越大 增长速度越大
flew-shrink
容器空间不足时，项目按照设置的缩小速度变小
取值：1 默认值
align-self
单独定义当前项目在交叉轴上的对齐方式
取值：flex-start
flex-end
center
stretch
auto 是容器align-items的值
transform
应用场景：悬浮图片变大变小（转换），慢慢变大（过度）
transform：transform-function transform-function…….
默认值 转换函数 可多个
none 默认
可以使用空格连接多个转换函数
位移
transform:translate()
translate(x) 一个值默认x轴/ translateX(x) 让元素在x轴位移,正数往右,负数往左
translateY(y) 让元素在y轴位移 正数往下 负数往上
translate(x,y)
缩放
transform:scale()
scale(value) x轴和y轴同时缩放
value>1 按倍数放大
0<value<1 按倍数缩小
-1<value<0 缩小并反转
Value<-1 放大并反转 x轴和y轴同时反转
scalex() 单独设置x轴
scaley() 单独设置y轴
scale（x,y）
旋转
transform:rotate()
rotate(ndeg) +顺时针 -逆时针
设置转换点 转换原点会对旋转效果产生影响
transform-origin：
取值：
1.xpx ypx 10px 100px
2.x% y% 80% 60%
3.关键字 x:left/center/right y:top/center/bottom
位移是根据坐标轴方向位移，但是旋转是连同坐标轴一起旋转的，所以旋转之后的位移，会出现偏差。
倾斜
transform:skewX(xdeg) / skew（xdeg,ydeg）/ skewY(ydeg)
skewX(xdeg)，让y轴向x轴倾斜n度，n:+ 逆时针 -顺时针
skewY(ydeg)，让x轴向着y轴倾斜n度，n：+顺时针 -逆时针
skew(xdeg,ydeg)
使用css，让一个div在任何情况下，都处于页面的正中心
所有3d都是模拟的
透视距离
Perspective:
距离 此属性要设置在3d转换元素的父元素上。
3d旋转
rotateY(ydeg) 以y轴为中心轴的旋转（旋转门 土耳其烤肉
rotateZ(Zdeg) 以z轴为中心的旋转（电风扇 风车）
rotate3D(x,y,z,ndeg) 3条轴一块旋转
比 角度
transition
transition-property 具体的设置某一个属性名称
all 所有支持过度的属性，都参与过度
支持过渡的属性：
1.大多数取值为具体数字的属性
2.颜色属性，背景图片
3.阴影
4.转换
5.visibility：hidden（3秒后直接隐藏） display：none不支持
#d1{
width:200px;
height:200px;
background:#0ff
/** 指定过渡属性 **/
transition:background border-radius transform;
/** transition-property:all **/
transition-duration:3s;
}
#d1:hover{
background:red;
border-radius:50%;
transform:translate(800px) rotate(180deg)
}
transition-duration:s/ms
transition-timing-function
ease 默认值 慢速开始，中间加速变快，慢速结束
linear 匀速
ease-in 慢速开始，持续加速
ease-out 快速开始，持续减速
ease-in-out 慢速开始 中间加速，再减速，慢速的结束
transition-delay:2 s/sm ；
transition: property duration timing-function delay.
最简方式：
transition：duration；
@keyframes
、调用
animation
24帧/s
12帧/s
声明动画
@keyframes
调用动画的属性
animation-name:
动画名称
animation-duration: s/ms
animation-timing-function：
animation-delay：s/ms
animation-iteration-count:2
具体的次数/infinite无限
animation-direction:
normal 默认值 0%~100%
reverse 100%~0%
alternate 轮流播放 第一遍0~100 第二遍100~0 第三遍 0~100
动画的简写方式
animation:name duration timing-function delay count direction
最简方式
animation:name duration
动画的填充模式
animation-fill-mode:
延迟时间内，填充动画的第一帧
在播放完毕后，填充动画的最后一帧
animation-fill-mode:
backwards 动画在延迟时间内，填充第一帧
forwards 动画在结束后，填充最后一帧。
both
none 默认
动画的播放模式
animation-play-state:paused/running
如果需要兼容低版本浏览器，需要添加前缀
在声明动画时添加内核
@keyframes 动画名称{}
@-webkit-keyframes 动画名称{}
@-ms-keyframes 动画名称{}
@-o-keyframes 动画名称{}
@-moz-keyframes 动画名称{}
项目中，一般都是直接使用已经设置好的动画，百度搜索（css动画库）animate.css->download下载->文件中head中link链接->css中animation直接调用动画名称。如果不知道想使用效果的名字，直接在网站搜。
reset.css
*{margin:0;padding:0}
normalize.css