css3

溢出

内容多，容器小，会发生溢出
默认溢出显示，默认纵向溢出

效果显示

溢出的控制 overflow
1.visible 默认值，缺省值，溢出部分可见
2.hidden 溢出部分隐藏
3.scroll 不管是否溢出都有滚动条
4.auto 溢出又滚动条，不溢出没有
5.overflow-x 单独设置x轴滚动条
6.overflow-y 单独设置y轴滚动条

p{
      /*溢出的控制     */
      overflow:hidden;
    }

边框的简写方式

width style color

border: 1px solid red;

width:边框的粗细 px
style: 边框的样式
- solid*:实线
- dotted*:点点的虚线
- dashed*:线条虚线
- double*:双实线

合法颜色值

颜色的英文单词
#00 00 00 6个16进制(0~255)
- rgb:色光三原色红 #ff 00 00 绿蓝
- #ff ff ff 代表白（光全开就是白）
- #00 00 00 代表黑（没开光就是黑）
#aabbcc--->#abc
rgb（r,g,b）10进制 0~255
rgb(r%,g%,b%) 255的%（不常用）
rgba a:透明度（0~1）
transparent; 透明

好看的蓝 ^[1]

边框最简单方式：border:style;默认1px,黑色，style

单边设置

border-方向: width style color;
方向：上右下左

单属性设置

border-width 边框大小
border-style 边框样式
border-color 边框颜色

单边的单属性设置

border-left-width 边框大小
border-right-style 边框样式
border-top-color 边框颜色

圆角 radius

border-radius:10px;

单位：px %; 临界点：50%变成圆

单角设置

border-top-left-radius: 2px
border-top-right-radius: 2px
border-bottom-left-radius: 2px
border-bottom-right-radius: 2px

边框阴影 box-shadow

取值：h-shadow v-shadow blur spread color inset;

h-shadow:水平方向的偏移量
v-shadow:垂直方向的偏移量
blur: 阴影的模糊距离
spread: 阴影尺寸
color : 阴影颜色
inset: 设置外部阴影为内部阴影

最简方式：h-shadow v-shadow

轮廓

边框外面一条线，边框的边框

outline: width style color;
一般只清除轮廓
outline:0/none:清除轮廓
border:0/none:清除边框

盒子模型，框模型

所有元素皆为框

框

元素在页面上实际占据空间的计算方式

宽度： 左外边距+左边框+左内边距+内容区域的宽度+右外边距+右边框+右内边距
高度： 上外边距+上边框+上内边距+内容区域的高度+下外边距+下边框+下内边距

外边距：边框以外的距离（元素与元素的距离）
内边距：边框与内容区域的距离

外边距 margin
- 改变外边距，元素有位移效果，边距无颜色
- margin:v1;4个方向上的外边距
- 上右下左单独一边的边距；
  如果当前行只有一个元素，右外边距数值不准确

取值：

px
% 父元素宽度的%
负数：往相反的方向移
auto: 必须左右外边距一起用，
作用：让块级元素水平居中
简写：margin:auto; 水平居中

外边距的合并：上下外边距以最大的一个值为准
解决方案：

只写上，或者下，不要混写
设计时规避

块级	行内	行内块
设置宽高有效	宽高无效	设置宽高有效
不写宽，默认宽父元素100%，不写高内容撑开	宽高都是内容撑	默认值带一个宽高，不同浏览器解析不同
单独成行	与其他行内和行内块元素共用一行	与其他行内和行内块元素共用一行
上下外边距有效	上下外边距无效	上下外边距有效，改变一行任意一个行内块的上下外边距，本行其他元素，跟着一起位移

css 重置 reset

body自带8个外边距
ul自带40px左内边距
body，p ,h1-h6,ol,ul,dl,pre都有边距，因浏览器解析不同，需要样式重置
*{margin:0;padding:0;}

blockquote, body, button, dd, 
dl, dt, fieldset, form, h1, h2, 
h3, h4, h5, h6, hr, input, 
legend, li, ol, p, pre, td, 
textarea, th,ul
{margin:0;padding:0;}

外边距溢出

在特殊情况下，为子元素设置外边距，会作用到父元素上

父元素没有上边框
子元素内容区域上边沿与父元素内容区域上边沿重合

解决方案：

1.给父元素添加上边框
缺点：增加了父元素实际占地高度
2.给父元素添加上内边距
缺点：增加了父元素实际占地高度
3.overflow:hidden;
缺点：想要溢出显示怎么办

4.常用给父元素添加一个大儿子
一个空的table元素

内边距

边框和内容区域之间的距离
修改内边距，效果是元素越大，内边的颜色，就是背景的颜色
一般，需要把元素撑开的需求需要内边距
padding:v1;
padding没有auto
取值：
1.px
2.%，以父元素宽度的%
简写方式：一个值

box-sizing:

取值：
1 content -box.默认情况下，设置width是内容区域的宽度

border-box:设置width是边框内部的总宽度（含边框）
- 元素实际占地高度：左外+width
- 一般子元素用%做宽，几个子元素有空隙，要设置border-box
  使用padding调整空隙大小

背景

background-color:合法颜色值；

背景图像

使用背景图，可让元素内部子元素，堆叠在背景上
background-image：url();
此路径可加双引号，单引号，可不加

background-repeat:repeat;
取值：
- repeat 默认值平铺
- no-repeat 不平埔
- repeat-x 水平平铺
- repeat-y 垂直平铺
background-position: 100px(x) 300px;(y)
- 取值：x,y
- px 而为单位
- %
- 关键字x:（left/right/centent）y(top /centent /bottom)
背景图片的尺寸
- background-size:
  取值:
- 一个值：px数字同时控制x,y的大小
- 两个值：分别控制x,y的大小
- 关键字：cover contain

cover:覆盖和填充，让背景图冲满整个容器，哪怕图片显示不完全

contain 包含，让容器显示完整的图片，哪怕容器有空白区域，也要包含完整图片

背景图片的固定
background-attachment:scroll(默认值)
取值：fixed 固定（相对窗口位置固定，滚动，位置不变，但只能在原容器显示）

7.背景的简写方式
color url repeat attachment position 没有size
背景图设置了fixed那么position会根据浏览器窗口定位

渐变gradient

渐变是多种颜色，平缓变化的一种显示效果
渐变的主要因素
色标，一种颜色，出现的位置
效果，至少两个色标
渐变的分类

线性渐变，以直线填充
径向渐变，以圆形来填充
3.充复渐变，将线性，径向重复执行

线性渐变：background-image
简写：background:linear-gradient(方向，色标1，色标2，色标3)
方向：取值 1.关键字，定义的

终点:
to top/to right /to bottom/ to let
角度：deg
0deg ->to top
90deg -> to right
180deg-> to bottom
270deg-> toleft
色标：颜色+位置
1. 位置，%
2. 位置，px
3. 位置不写，平均分配

径向渐变

background:radial-gradient(半径 at 圆心，色标1，色标2，色标3)

半径：px为单位的数字，色标中位置用%，会根据半径变化，如果是px，半径失去作用
圆心： x y px为单位的数字
x% y%
关键字 x:left/center/right
y:top/center/bottom

重复渐变
repeating-linear-gradient(方向，色标1，色标2，...)
repeating-radial-gradient(半径 at 圆心，色标1，色标2，...)

浏览器兼容 css hack

渐变兼容低版本浏览器
-moz- 火狐
-webkit- 谷歌/苹果
-o- opera
-ms- ie
-webkit-repeating-linear-gradient(方向起点，色标1，色标2，...)
取值：top bottom left right,从哪里开始

文本格式化

指定字号大小
- font -size :值（px/pt/rem/em）
字体系列
- font-family:值
  pc中字体库中有的字体，有空格建议加“”用逗号隔开多个字体系列
  chiller,“mv boli”,jokerman,黑体；
字体加粗
- font-weight:值(关键字：normal/bold/bolder/lighter/
  不带单位的数字，100的整倍数：100~1000)
字体样式font-style
normal(默认值)
italic斜体
小型大写字母
font-variant:small-caps
简写
font:style variant weight size family
45312
最简：size family

文本属性

color:字体颜色
文本对齐方式
- text-align:
值：left / center/ right / justify(两端对齐)

margin:o auto；和text-align的区别

margin:o auto:该块级元素本身水平居中
text-align：设置内部文本，行内，行内块，水平对齐，该元素内块级元素无效

行高：line-height
行高自带的功能
如果一行文字字号小于行高，那么该行文字，显示在行高中间
一般情况下行高等于容器的高度，那么该文字就能在容器中垂直居中

注：多行文本不使用行高
取值：px为单位的数字
无单位的数字代表行高是字号的倍数

文本线条
text-decoration:none; 没有线条修饰，a去除下划线

取值：underline:下划线
取值：overline:上划线
取值：line-through:删除线；

首行缩进
text-indent: px
text-shadow:h-shadow v-shadow blur color
h-shadow :水平便宜
v-shadow：垂直偏移
blur：模糊距离
color：阴影颜色

css编写思路^[1]

表格的样式

常用属性
尺寸，边框，背景，字体，内外边距，

table 设置边框，只会设置最外层最大边框
td/th (外边距无效) 尺寸，边框，背景，字体，内边距，
vertival-align:指定单元格垂直对齐方式
取值：top、middle,bottom

table是特殊的表现方式
实际尺寸和设计不一样，是根据内容数据的多少决定的
单元格小，内容多，制动撑开，
内容小，单元格大，跟单元格走

表格渲染方式与其他元素不同
先读取到内存中再一次型渲染，效率低

表格的特有属性

border-collapse:separate(默认值，边框分离状态)
collapse(合并)
border-spacing: px 边框间距前提边框必须分离
一个值：水平垂直间距
两个值：第一个水平，第二个垂直
标题位置
caption -side 默认值top 可设置为bottom
设置表格的显示规则
渲染表格的方式
table-layout:
取值：auto（默认值）制动表格布局
td/th的尺寸实际上由内容决定
fixed 固定表格布局
不管内容多大，不存入内存，按尺寸显示，直接渲染

table自动布局	table的固定
单元格大小自动适应	单元格大小取决于设置的尺寸
表格复杂时速度慢	任何情况下加载速度都快
比较灵活	不灵活
适用于表格不复杂，不确定每列大小的表格	适用于表格确定每列大小的布局

定位

1. 什么是定位

设置元素在页面上的位置

2. 分类

普通流定位
浮动定位
相对定位
绝对定位
固定定位

3. 普通流定位（默认）（默认文档流）

每个元素在页面上都哟自己的空间（不能堆叠）
每个元素都是从父元素左上角绘制
块级元素按照从上倒下方式逐个排列，每个元素单独成行
行内和行内块元素在一行中从左往右逐个排列，一行放不下换行

4. 浮动定位

让块级元素横向显示

float：取值
- none 不浮动
- left 向左浮动，让元素脱离文档流，像当前行左看齐
- right 向右浮动，让元素脱离文档流，像当前行右看齐
浮动的特点
1.元素一旦浮动，就脱离文档流（不再占用页面空间，后面元素上前补位）
2.浮动元素，或i停靠在父元素的左/右边，或者其他已浮动元素的边缘
3.父元素横向显示不下说有元素，显示不下的部分会自动换行
4.浮动解决，多个块级元素横向显示的问题

浮动引发的特殊情况
1. 浮动引发的占位问题
  - 当父元素显示不下说有浮动元素时，显示不下元素会换行，已浮动元素，会根据浮动占据位置，导致被挤下去的浮动元元素，要在更下方显示
2. 元素一旦浮动，元素没定义宽度，宽度靠内容撑开
3. 行内元素浮动后自动变成块级
可以设置宽高，内外边距
4. 文本，行内，行内快是不会被浮动元素压在下面的，而是巧妙地避开，环绕着浮动元素显示

6. 总结

一个元素脱离文档流：对应下面几件事
1.元素本身不占页面空间，后面元素向前补位
2.脱离文档流的元素，都变成块级元素
3.如果元素没宽，脱离文档流后，宽度靠内容撑开

7. 清除浮动效果

一个元素不浮动，前面与浮动的兄弟元素带来了影响
影响：元素向前补位
清除浮动带来的影响：不上前补位

clear:none/left/right/both
/left: 清除左浮动带来的影响
/right: 清除右浮动带来的影响
/both: 同时清除左右浮动带来的影响

8. 高度坍塌

父元素没有定义高度，高度靠内容撑开，子元素都浮动了，导致父元素找不到高，这样就导致了父元素的高度坍塌
* 解决方案：
* 1. 给父元素定义高度弊端，动态的数据，没办法知道具体的高度
* 2. 父元素也浮动弊端，会影响其他元素
* 3. 父元素overflow:hidden 弊端，如果想溢出就冲突了
* 4. 追加一个小的块级元素，设置clear:both

9. 定位

1. 显示

显示的效果

visibility:visible 默认值可见
hidden 隐藏不可见不脱离文档流

* 显示方式（重点）

设置元素在页面中的表现形式（块级，行内，行内块，table）
display: inline(行内)/block(块级)/inline-block(行内块)/table(表格)/none（隐藏（脱离文档流的隐藏））

ps: display:none和visibility: hidden区别

display:none（隐藏（脱离文档流的隐藏））后面元素向前补位
visibility:hidden 隐藏不可见不脱离文档流占据位置

* 透明度 opacity（0 ~ 1）透明 ~ 不透明

opacity和rgba的区别
rgba只会给变当前颜色透明度
opacity会改变颜色和后代和内部元素的透明度

* 垂直对齐方式

vertical-align 只能用于行内块表格 img

1. 在table中使用时。取值：top/middle/bottom

2. 图片和文字的排版

给图片设置vertical-align:设置的是图片前后文字，与图片的垂直对齐；取值：baseline(默认值)/top/middle/bottom
一般设置非基线对齐

* 光标的设置

cursor: default (默认值箭头)/ pointer（小手）/ text(文本)/ wait(加载)/ help(问号)/ crosshair(加号)

10. 列表样式

1. 列表标识向

list-style-type:none/disc/circle/square

2. 列表项图片

list-style-image:url() 小图
###### 3. 列表项的位置
list-style-position:outside 默认在li外部 ul内边距里
inside 在li内部
##### 4. 简写方式
list-style:type image position
项目中使用频率最高的list-style:none;
如果有多个div样式相同可以使用多个ul li布局

11. 定位

position:
取值：static 默认值静态（默认文档流）
relative：相对定位
absolute: 绝对定位
fixed: 固定定位
当一个元素设置了position:取值为这三种种的一种时，这个元素，被称为以定位元素
一定为元素：自动解锁4个偏移属性，
top/right/bottom/left

1. 相对定位

不写偏移属性，页面没有作用，和没写定位一样的，需要配合偏移属性
左右冲突听左的，上下冲突听上的，正值向下，负值向上
相对定位不脱离文档流
相对定位的参照物是自己原来的位置
使用相对定位场合
* 类似margin，元素微调
* 作为绝对定位的祖先元素

2. 绝对定位（大招）

配合偏移属性
脱离文档流（不占空间，，补位块级，要写宽高）
绝对定位的参照物？？？？？？？？？？？
>祖先元素，没有已定位元素，那么相对body左上角位移
祖先元素，有已定位元素，那么按最近的祖先元素左上角位移

3. 固定定位 fixed

脱离文档流，相对body偏移，永远在可视区域

4. 堆叠顺序

默认堆叠顺序，后写的顺序高（是html元素编写的顺序）
使用z-index修改顺序
z-index：无单位的数字（只有已定位元素才能用）
堆叠顺序对父子级无效，儿子永远在父亲上面

css3 核心

一. 复杂选择器

兄弟选择器

相邻兄弟选择器，获取选择器1后面紧紧挨着的选择器

选择器1+选择器2

通用兄弟选择器，获取选择器1后面所有符合选择器2的元素

选择器1 ~ 选择器2
用途：
设置一组元素，但大哥不应用此样式

二，属性选择器

elem代表元素 attr代表属性名 val代表属性值
[attr]{} 匹配页面带attr属性的元素
[attr1][attr2]{} 匹配页面带attr1和attr2属性的元素
[attr=val]{} 匹配页面带attr=val属性的元素
elem[attr]{} 匹配页面带attr属性的elem元素

三. 关于属性值的模糊匹配

[title^="ga"]{} 属性值为title并且值开头为ga
[title$="ga"]{} 属性值为title并且值结尾为ga
[title*="ga"]{} 属性值为title并且值含有 ga
[title~="ga"]{} 属性值为title并且值含有 ga 这个单词

四. 伪类选择器

:link/:visited/:hover/:active/:focus

1. 目标伪类 :target

让被激活的锚点，应用一个样式

div{
  display:none;
}
div:target{
display:block;
}
1
 2
1111111111 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, enim, blanditiis, quae sunt accusamus debitis minima in architecto aliquid tempore a at recusandae necessitatibus quasi et laudantium porro sint beatae voluptates officiis nostrum iste est aliquam illum veniam! Quaerat, veritatis eaque harum velit commodi perferendis iste quidem ipsam molestiae eveniet?   
 2222222222222Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, enim, blanditiis, quae sunt accusamus debitis minima in architecto aliquid tempore a at recusandae necessitatibus quasi et laudantium porro sint beatae voluptates officiis nostrum iste est aliquam illum veniam! Quaerat, veritatis eaque harum velit commodi perferendis iste quidem ipsam molestiae eveniet?

2. 结构伪类

p：first-child{}
匹配p的父亲的第一个儿子，这个儿子也得是p
p：last-child{}
匹配p的父亲的最后一个儿子，这个儿子也得是p
p：nth-child(n){} n从一开始
匹配p的父亲的第n个儿子，这个儿子也得是p

3. 空元素伪类

：empty{} 匹配内容区域啥都没有，一个空格都不能有

4. 唯一子元素（匹配有独生子女的标签）：only-child{}

a:only-child{} a标签在父元素里是独生子女

5. 否定伪类：not(条件){}

div:not(:first-child){}除了第一个，其他都选择
elem:not(selector) 符号selector的元素都不要

6. 伪元素选择器

：first-letter (h5) （h4是：：first-letter）
给首字母定义样式
：first-line
给首行定义样式
：：selection 必须是两个：：
匹配用户选取的内容的样式（只能设置文本颜色和背景颜色）

4.内容生成

使用css命令，添加html元素
：before (h5) （h4是：：first-letter）
在元素内容区域最前面添加一个伪元素
默认类似于span；添加的内容用content
content只能写文本或者url
可以设置各种样式
:after (h5) （h4是：：first-letter）
在元素内容区域最后面添加一个伪元素
默认类似于span；添加的内容用content
content只能写文本或者url
可以设置各种样式

内容生成，可以解决的问题

> 1.外边距溢出

：before{
display:table;
content:"";
}

2.高度坍塌

：after{
display:block;
content:"";
clear:both;
}

二. 弹性布局

是一种布局方式主要解决的问题，摸个元素中所有子元素的布局方式
为布局提供了很大的灵活性

1.弹性布局专有名词

容器：设置了display：flex的元素，是个父元素
要发生弹性布局元素们的父元素

项目：要发生弹性布局的元素们
就是容器的子元素

主轴：项目们排列的方向，叫做主轴
如果项目们横向排列，主轴是x轴
纵向排列，主轴是y轴
排列顺序成为了主轴的起点和终点

交叉轴：永远与主轴方向垂直的一条轴，叫做交叉轴
项目们在交叉轴上的排列顺序，成为了交叉轴的起点和终点

2.语法：

将元素设置为弹性容器，容器所有子元素都变成弹性项目
这些项目都允许按弹性布局的方式排列
display:

值：flex 将块级元素设置为弹性容器
inline-flex 将行内元素设置为弹性容器

元素设置弹性容器后，容器text-align vertical-align失效
项目float,clear失效

3.容器的属性

主轴：
flex-direction：
取值：1.row 默认值主轴为x,起点左侧
2.row-reverse 主轴为x,起点右侧
3.column 主轴为y,起点上侧
4.column-reverse 主轴为y,起点下侧

设置项目换行

flex-wrap:
取值：nowrap 默认值
wrap
wrap-reverse
主轴方向和换行的缩写
flex-flow:direction wrap

4. 定义项目在主轴上的对齐方式

justify-content:
取值：flex-start 默认值，主轴起点
flex-end:主轴终点对齐
center:主轴中心对齐
space-between: 两端对齐（两端无空白距离）
space-around：每个间距大小相等

5.项目们在交叉轴上的对齐方式

align-items
取值：
flex-start 默认值，交叉轴起点
flex-end:交叉轴终点对齐
center:交叉轴中心对齐
stretch:如果项目不定义高度，项目充满交叉轴

4.项目的属性，设置在某一个项目上，不影响其他项目

1.项目排列的顺序

order:无单位整数
值越小，越靠近主轴起点，默认值是0

2. flex-grow:无单位整数（定义项目放大比例）

如果主轴剩余空间够大，项目将按比例放大（比例不准确），默认值是0（不放大），

flex-shrink:无单位整数缩小默认值是 1

主轴空间不够时，项目将按比例缩小（比例不准确）（数字越大缩的越小）
flex-grow：basis 就是计算项目能放大缩小是占据的空间大小

简写： flex: 0( flex-grow) 1(flex-shrink) auto(flex-basis)

某个项目在交叉轴上的对齐方式

align-self (设置某一个项目)

flex-start 默认值，交叉轴起点
flex-end:交叉轴终点对齐
center:交叉轴中心对齐
stretch:如果项目不定义高度，项目充满交叉轴
auto 使用容器设置的align-items的值

三转换

改变元素在页面中的位置，大小，角度以及形状
2D转换，只有x,y
3D转换，添加了Z轴，模拟3D

转换的属性

transform:
取值:一个或者多个转换函数，函数用空格分开

转换原点，对旋转产生影响

transform-origin:
取值：
两个值(x，y)：
三个值（x,y,z）
top bottom left right center
数字px
数字%
学习转换就是学习不同的转换函数

2. 2d转换

1.位移（改变元素的位置）
transform:translate()
取值：translate（x）等同于translateX
指定在x轴上的位移
+值往右，负值往左
translateY
指定在Y轴上的位移
+值往下，负值往上
translate（x,y）同时设置x,y轴的位移

2. 旋转

rotate(ndeg)
n:+ 顺时针 -逆时针
注意：旋转原点会影响旋转效果

旋转连坐标一起旋转，会影响旋转后的位移方向

3.缩放，改变元素的大小

scale(数值)
取值：
1.一个值val>1 x轴y轴同时放大
0 -1 2.两个值，分别设置两轴的缩放
3.scaleX(val)单独设置x轴
4.scaleY(val)

4.倾斜

skewX(角度)等同于skew(角度)
让元素向着x轴发生倾斜，实际上改变的是Y轴的角度
n：+y轴是逆时针 -是顺时针
skewY(角度)
让元素向着Y轴发生倾斜，实际上改变的是X轴的角度
n：+x轴是顺时针 -是逆时针
skew(x,y)

3d转换 3d旋转

① 透视距离

模拟人的眼睛3d转换之间距离，距离不同，看到的效果不同
perspective:px为单位的数字
此属性要添加在3d转换的父元素上

设置一个3D元素的基数位置

perspective-origin:center center;

让转换的子元素保留3D转换 -- preserve-3d：表示所有子元素在3D空间中呈现

transform-style:preserve-3d;
② 3D转转
transform
取值：

1.rotateX(xdeg) 以x轴为中心轴旋转
2.rotateY(ydeg); 以y轴为中心轴旋转
3.rotateZ(ydeg); 以z轴为中心轴旋转
4.rotate3D（x,y,z,deg） x,y,z为0，该轴不参与旋转
大于 0都会参与旋转，但是速度不同

过渡
①什么是过渡

让css值在一段时间内，平缓变化的效果，（两个值之间的变化）

②过度的语法
设定执行过渡的属性
transition-property:
取值：

执行过渡的样式属性
多个属性用空格分开
all 所有支持过度的属性都过渡
支持过度的属性有？

颜色属性
大多数取值为具体数字的属性
阴影
转换
visibility

指定过渡时长

整个过渡效果持续的时间
transition-duration:3s; s/ms

时间曲线函数

transition-timing-function:ease;(默认值)
取值：ease 慢开加速慢关
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 慢开先加速后减速慢关
④延迟过渡执行
transition-delay:2s;
⑤过度代码编写位置
写在原来的选择其中，过渡效果有来有回
写在hover中过渡效果，有去无回
简写方式：transition: all(property) 2s(duration) linear(timing-function) 2s(delay);
最简方式：transition:duration
3.使用过度的时机（只有两个关键帧）
两个点的效果，用过渡
必须使用伪类激发

动画

1.什么是动画
多个过渡效果放到一起
可以不使用伪类激发
2.关键帧，来控制动画的每一个状态
3.动画的使用
①创建动画
@keyframes 动画名称{
0%{}
....
100%{}
}
②调用动画
设置调用动画名称
animation-name:动画名称
设置动画执行时间
animation-duration: 时间；
设置动画的时间曲线函数
animation-timing-function:
取值： ease/linear/ease-in/ease-out/ease-in-out
设置动画的延迟
animation-delay:时间；

动画的其他属性

③播放次数
animation-iteration-count:次数；
取值：
1.具体播放次数
2.无限次 infinite
④动画播放顺序
animation-direction:
取值
正常播放 normal 0~100%去播放
reverse 100%~0去播放
alternate: 轮流播放奇数正着播放，偶数反着播放
⑤简写方式
animation: name duration timing-function delay count direction
⑥动画的填充方式
animation-fill-mode:
取值：
backwards 延迟时间内，填充动画的第一帧
forwards 动画播放完毕后，填充动画最后一针
both 都填
⑦动画的暂停和播放
animation-play-state:
取值：
paused;暂停
running 播放

动画兼容
如果要兼容低版本浏览器，需要在动画声明前加前缀
@keyframes 动画名称{}
@-webkit-keyframes 动画名称{}
@-ms-keyframes 动画名称{}
@-moz-keyframes 动画名称{}
@-o-keyframes 动画名称{}
动画^[2]

六. css优化

css优化的目的

1.减少服务器压力
2.提升用户体验

1.css优化的原则

尽量的减少http请求个数
页面的顶部引入css
将css和js放到外部单独文件中

2.css代码优化

合并样式（能写群组就不单独写，用户简写方式，就把单独定义属性）.
缩小样式文件大小
减少样式的重写
选择更优质的样式属性值
代码压缩
避免出现空的src和href

七 css reset和normalize.css

什么是css reset

html标签，在各个浏览器中的默认样式不同
为了统一的开发，吧默认样式统一化，这个行为叫css reset
可以自己写，也可以找业内，比较有名的css reset代码
自己写：
内外边距清0，
input去边框和轮廓
a标签下划线
em i不要斜体
ol ul去点
默认字号，字体系列

2.css reset 弊端

市面上css 实现了html默认样式高度一致性
吧不同的浏览器默认样式，进行高度统一
但是这种处理过于霸道，把一些需要保留的默认样式也清除掉了

3.关于css reset优化方案（不是必须）

normalize.css是一种现代的，为html5准备的优质替代方案
保留了一些可以保留的默认样式，而不是霸道的清除
normalize.css相对平和
不讲究统一，关注通用性和可维护性

附加

雪碧图，精灵图

如果页面出现的小图标比较的多
一般不使用img一个一个的
吧说有的图合成在一个
使用背景与背景定位
目的：有效的减少http请求的次数

1.找到写样式的元素：从外往里，上往下，左往右
2.尺寸和大体位置
3.边框黑背景
4.文本相关所有
5.微调 ↩ ↩
https://daneden.github.io/animate.css/ ↩