HTML 知识点 小结
001、浮动不上去的原因
1、宽度不够浮动不上去
2、前一个元素不浮动后一个元素加了浮动你也浮动不上去
3、都加了浮动还是浮动不上去！那么请你检查你的类名有没有写错
002、图片出不来的原因
1、没有设置宽度和高度
2、如果你的盒子里面有内容可以不设置宽度和高度，因为是你的内容给你撑开的高度
3、路径错误，一般情况下来说如果路径错误了，按照正常来说会在console里面会报一个红色的错误
4、检查你的类名 以及你的class及id是否写的正确
003、为什么我的内容不居中
1、一般情况下如果让一个内容区居中的话必须设置两个条件 a:宽度必须设置 b、margin:0 auto;
2、一般情况下外围盒子用id 内容元素如果需要取名字的情况下统一用class来取名
004、样式加不上去
1、请检查你的link标签的书写是否跟我下面的一模一样
<link rel="stylesheet" type="text/css" href="路径"/>
2、请检查你的类名 和你的取得名字
3、如何实在加不上去了请您看一下你们的权重是否被覆盖了
005、什么时候需要减掉padding
1、如果这个盒子设定宽度和高度的话那么padding就需要减掉
2、如果这个盒子没有设定的话那么就不需要减掉
006、html标签嵌套的一些坑
1、a标签
a标签不能嵌套，若a标签中嵌套了a标签，浏览器会自动添加结束符号，故不能嵌套
1 例如 2 <a href="#">首页 3 <a href="#">千锋</a> 4 </a>
浏览器解析：
<a href="#">首页</a>
<a href="#">IT</a>
如果代码结构复杂，会导致html层级错乱
不能嵌套的还有： h不能直接套h标签 p标签是不可以套块标签的
2、p标签
3、h标签
1、!DOCTYPE html
声明文档类型
2、网页的三大组成部分
结构层 表现层 行为层
html css js
3、什么是html
超文本标记语言 Hyper Text Markup Language
4、什么是xhtml
可扩展的超文本标记语言
5、文件名规范
小写英文字母、数字、下划线的组合， 其中不得包含汉字、空格和特殊字符； 必须以英文字母开头
6、站点的作用
整合网站资源 规划网站的内容和代码
7、html的注释
<!-- -->
8、html中的三种列表分别是哪几个？基本语法怎么写
1 无序列表 2 3 <ul> 4 <li></li> 5 ... 6 </ul> 7 8 9 有序列表 10 11 <ol> 12 <li></li> 13 ... 14 </ol>
扩展：可以通过type来改变有序列表的序列号
自定义列表
<dl> <dt></dt> <dd></dd> </dl>
8、alt与title的区别
title:提示信息的作用
alt：当图片不显示的时候显示的信息
9、如何设置单元格与单元格之间的距离
cellspacing="0"
10、如何设置单元格与内容之间的距离
cellspadding="0"
11、设置单元格的几个必要的条件
width:宽度
height：高度
border：边框
12、单元格的行合并和列合并
rowspan:行合并
colspan：列合并
13、target打开页面的两种方式
target="_self" 本页面打开另一个页面
target="_blank" 新开一个页面
14、input的type类型都有哪些？
type:
text文本输入框
password密码输入框
button:空按钮
submit:提交按钮
reset：重置按钮
radio:单选按钮
checkbox:复选按钮
15、如何禁止表单或者输入框输入
disabled
16、如何让checkbox默认为选中状态
checked
17、post和get的区别
1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的action属性所指的URL中，在URL中可以看到。post是通过HTTP post机制，用户看不到这个过程 。
3. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
4. get安全性非常低，post安全性较高。但是执行效率却比Post方法好
18、css的基本语法
选择符{属性:属性值;属性:属性值;}
19、css的引入方式有哪几种？优先级如何分配？
1、外部引入 <link rel="stylesheet" type="text/css" href="这里面是路径"
2、内部引入
<style> ....css代码 </style>
3、行间样式
<div style="属性:属性值;属性:属性值;"></div>
优先级：
遵循一个"近水楼台先得月"的原则 行间的最大 外部和内部的优先级主要看书写的先后顺序
20、css的选择符都有哪些？ 权重分别是多少？
id选择符 class选择符 标签选择符 伪类选择符 全局选择符 群组选择符 包含选择符
权重：100 10 1 10 1 相加
21伪类选择器的几种状态
:link-------默认状态
:visited--------已访问的一个状态
:hover------鼠标滑过的一个状态
:active-----鼠标按下去的一个状态
22、link和import导入外部样式的区别
差别1：老祖宗的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。
差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。
差别3：兼容性的差别。：@import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.
23、px em pt ppi个是什么意思？绝对大小关键字都有哪些
PPI是图像分辨率的单位，图像ppi值越高，画面的细节就越丰富，因为单位面积的像素数量更多。PPI也叫图像的采样率（在图像中，每英寸所包含的像素数目）。
px是像素单位，em是相对单位，pt是绝对单位,pt是一种固定长度的度量单位.
xx-small =9px
large =19px
x-small =11px
x-large=23px
small=13px
xx-large =27px
medium=16px
24、字体的属性都有哪些
font-size
font-style
font-family
font-weight
color
line-height
25、文本属性都有哪些
text-transform
text-align
text-decoration
text-indent
letter-spacing
word-spacing
26、列表属性有哪些
list-style-type
list-style-image
list-style-position
27、background-repeat的属性值有哪些，意思是什么？
no-repeat:不平铺
repeat：平铺 (默认)
repeat-x：横向平铺
repeat-Y:竖向平铺
28、实现文本三个点的几个条件
text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1、容器宽度：width：value；（px、%，都可以）
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis;
注：必须是单行文本才能设置本文溢出！！！
IE6+；chrome1.0+；safari3.1+（firefox,opera暂不支持）
29、请你解释一下jpg gif 与png之间的不同之处
jpg:有背景颜色，背景不能够透明，不支持动画
png:没有背景颜色，不支持动画
gif:有动画效果，支持背景透明
30、常见的内联元素和块级元素都哪有些。
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
内联元素
a –超链接（锚点）
br - 换行
i - 斜体
em - 强调
img - 图片
input - 输入框
span - 常用内联容器，定义文本内区块
strong - 粗体强调
select - 项目选择
31、vertical-align的用法 <垂直居中>.
三个条件：
1：必须给容器（父元素）加上text-align:center;
2:必须给当前元素转成行内块元素（display:inline-block;）再给当前元素加上vertical-align:middle;
3：在当前元素的后面（没有回车）加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block
32、请简述一下块级元素和内联元素的特点
块级元素
a、块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，
B:默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。
C:块状元素都可以定义自己的宽度和高度。
D:块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。
内联元素三大特点：
A:内联元素的表现形式是始终以行内逐个进行显示；
B:内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；
C:内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示;(padding-top:;margin-top/bottom:;)
32、什么是置换元素与非置换元素
置换元素：具有内联元素的特征，但是可以直接设置宽度和高度！常见的置换元素----img input select textarea
什么是非置换元素：除了置换元素其他都是非置换元素
33、position定位的属性值都有哪些？每个值得意思是什么？
static：默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
absolute：相对于父级元素的绝对定位，浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，若父级都没有定位，则以html（根元素）可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。。(层叠的顺序z-index:value)
relative：是相对于默认位置的偏移定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流】
fixed：相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。
34、相对定位和绝对定位的区别
1、参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。
35、哪种定位有z-index属性
固定定位(fixed) 绝对定位（absolute）
36、如何让一个元素消失（至少写出5种方式）
1、display:none
2、height:0;
3、overflow:hidden;
4、position定位，然后控制left top right bottom 负值
5、margin负值
37、如果给一个元素设置透明度，如何让这个元素的内容不发生透明度变化
1、rgba()
2、定位脱离文档流
38、如何让一个物体在页面水平垂直居中
1、div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}
2、div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}
39、透明度的兼容写法
透明度设置 IE10以下浏览器写法：
filter:alpha(opacity=value);取值范围 1-100 IE9两种都支持，但是优先显示上面的方法；
兼容其他浏览器写法： opacity: .value（0.2）
(value的取值范围0-1,0.1,0.2,0.3-----0.9) 例如：opacity: .8 ; filter:alpha(opacity=80);
40、什么是精灵图，它的原理是什么。优点是什么 ？
一、将导航背景图片、按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position”来实现背景图片的定位技术。
二、图片整合的优势： 1）通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度。 2）通过整合图片来减小图片的体积。
41、为对象选择符有哪些
1、::after: 与content属性一起使用，定义在对象后的内容。
2、before:与content属性一起使用,定义在对象前 的内容。
3、::first-letter 定义对象内第一个字符的样式。
4、::first-line:定义对象内第一行的样式。
5、:selection:定义对象选中后高亮效果
42、清除浮动的几种方式，（至少写4种）
hack1：给父元素添加声明overflow:hidden;
- 优点：简单，代码少，浏览器支持好
- 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
hack2: 给父元素加height
- 优点：简单，代码少，容易掌握
- 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
hack3: 在浮动元素下方添加空div,并给该元素添加 声明：div{clear:both;}
优点 代码少 容易掌握
缺点 若浮动过多，会导致代码累赘
hack4:万能清除浮动法 p:after{content:“.”;clear:both;display:block;height:0;overflow:hidden; visibility:hidden;}
缺点：代码多，不易理解，不适合初学者理解原理。
优点：支持性好，各大网站都在用万能清除浮动
43、*visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失不显示，也不再占用位置。
44、什么是css样式表？优先级算法如何计算？
层叠样式表。
a.重要性和来源的优先级排序从低到高是：
1）浏览器默认样式
2）class/id.....选择器的权重
3）内部或者外部 （书写顺序）
4）行间样式
5）!important 最高的
45、你所知道的IE过滤器都有哪些，兼容性如何
1）_ 下划线属性过滤器
IE6及更低版本浏览器中会继续解析这个规则。
2）!important关键字过滤器 它表示所附加的声明具有最高优先级的意思。被浏览器优先显示。（IE6不识别此写法） 语法：选择符{属性：属性值!important;}
3）* 属性过滤器 该属性能被IE7及以下浏览器识别，
4）\9 ： IE版本识别；其他浏览器都不识别
5）\0 : IE8及以上版本识别；其他浏览器都不识别
46、如何让一个物体在页面水平垂直居中
1、div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}
2、div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}
47、五大浏览器内核代表作品
*Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器 代表作品IE
*Gecko：： 代表作品Mozilla Firefox
*Webkit : 代表作品Safari、Chrome
*Presto : 代表作品Opera ，
*Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。
48、哪些属性可以继承？
1）文字相关：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing
2）列表相关：list-style-image、list-style-position、list-style-type、list-style
3）颜色相关：color
4）透明度（子元素会继承祖元素的opacity，但是无法更改）
注：font-size继承的是父元素的大小，而不是比例。line-height当父元素是百分比或px值得时候，子元素跟父元素相同，当父元素是normal或数字的时候，子元素的line-height是子元素的字体大小乘以数字。
49、表格的行分组有哪些
<thead></thead>表头
<tbody></tbody>表体
<tfoot></tfoot>表尾
50、表单字段集与字段级标题的用法
举个栗子
<fieldset disabled="disabled"> <legend>健康状况</legend> 身高：<input type="text"/> 体重：<input type="text"/> </fieldset>
51、请您简述一下jpg,gif，png各自的特点和不同
1)jpg:有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 ) 有背景颜色，背景不能够透明，不支持动画
2gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像; 有动画效果，支持背景透明
3)png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像; 没有背景颜色，不支持动画
52、 详细说明BFC的渲染规则，怎样生成新的BFC，及其作用？
什么是bfc:?
块级格式化上下文，他是一个独立的渲染区域，也可以理解成一个独立的容器
如何产生BFC?
.根元素
b.float属性不为none
c.position为absolute或fixed
d.display为inline-block，table-cell，table-caption，flex，inline-flex
e.overflow不为visible
bfc的作用？
a.自适应两栏布局
b.清除内部浮动
c.防止垂直margin重叠（放在两个BFC里）
53、请写出5种IE6兼容的问题，并写出解决方法
详情看兼容的笔记
54、 为什么要用css reset文件？
定义：首先css reset指的是重置浏览器的默认样式
作用：因为现在的浏览器很多，并且每个浏览器都有自己的默认样式，这样就会导致一个页面在多个浏览器下展示产生差异，所以我们需要做一些处理使每个浏览器下展示一致，故需要css reset
55、哪些元素的值可以设置成负值
z-index
text-indent
margin
position
order
阴影：text-shadow:
56、在css中如何合并单元格与单元格之间的距离、以及边框线如何变成一像素、如何让没有内容的元素消失
border-spacing:可以设置单元格与单元格之间的距离
border-collapse:collapse可以合并单元格的边框线
empty-cells:hide 可以让无内容的元素消失
57、表单数据的行分组都有哪些
thead tbody tfoot
58、请写出20个HTML5新增的标签？
header footer main section article aside figure caption <time>
colgroup col video audio nav legend fieldset datalist source
59、请写出video和audio常用的一些属性
controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay属性：如果出现该属性，则视频在就绪后马上播放。
loop属性：重复播放属性。
muted属性：静音属性。
poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。
Type属性值： 用于视频：video/ogg video/mp4 video/webm 用于音频：audio/ogg audio/mpeg
60、如何设置文本框处于未输入状态时文本框中显示的输入提示
placeholder
61、如何给文本框、选择框、自动获得焦点
autofocus="autofocus"
62、如何设置表单验证不能为空
required="required"
63、如何取消表单的验证？
novalidate="novalidate"
64、简述一下你对HTML语义化的理解?
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
及时在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
65、渐进增强和优雅降级
渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
66、层级选择器都哪有些
E+F E>F E~F
67、主流浏览器的前缀有哪些？
-ms- IE
-moz- 火狐
-webkit 谷歌
-o- Opera
68、background-size有哪几个值？每个值的意思都是什么？
1、以百分比为值设置背景图大小
2、cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
3、contain
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
69、video与audio常用的格式有哪些
用于视频：video/ogg video/mp4 video/webm
用于音频：audio/ogg audio/mpeg
70、.px，em，rem，pt 、ppi 的每个代表什么意思
1）px实际上就是像素，用px设置字体大小时，比较稳定和精确
但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的web页面时，如果对浏览器进行了缩放，这时会使我们的web页面布局被打破。因此，这时就提出了使用“em”来定义web页面的字体。
2）em就是根据基准来缩放字体的大小
em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小
3）rem是相对于根元素字体大小来显示的
rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值
4）pt的大小等于1英寸的1/72
磅：他是作为文字的一种计量单位
这种度量方式来源于打印-设计背景，最适合于媒体，但同样广泛应用于显示器
PPI是图像分辨率的单位，图像ppi值越高，画面的细节就越丰富，因为单位面积的像素数量更多。
71、css选择符有哪些？
1）通配选择符 *
2）类型选择符 /元素选择符 a
3）属性选择符 input[type="button"]
4）包含选择符 div .code a
5）子对象选择符 ul.test>li
6）ID选择符 #
7）类选择符 .
8）群组选择符 body,ul,li
9）伪类及伪对象选择符 div:first-letter a:hover
10）相邻选择符 li+li
72、请你说一下标准盒模型与怪异盒模型的一个区别？他们的组成部分是如何组成的
标准盒模型：content+border+padding
怪异盒模型：content
一个算盒子的宽度的时候加上border和padding另一个不加
怪异盒模型实现：box-sizing:border-box
标准盒模型：box-sizing:content-box
73、html+css经典布局
1）左列定宽 右列自适应----------------->悬挂式布局
2）两列定宽 中间自适应---------------->圣杯布局
74、弹性盒知识点
弹性盒
1、要使用弹性盒、必须要给父级加上display：flex
2、我们要设置主轴的排列方式：flex-direction;主轴的默认排列方式是row(也就是沿X轴排列) 如果需要沿Y轴排列的话就设置值column
3、设置主轴的对其方式：如果主轴的排列方式是column那么现在的主轴就是Y轴 如果是row 那么主轴就是X；属性：justify-content
4、设置侧轴的对其方式：align-items;也就是说设置Y轴的对齐方式
5、align-content:用多行对齐方式的话就必须用flex-wrap值为wrap.这个也是来设置Y轴的对齐方式
6、flex-wrap是来设置换行主要用到的值就是wrap
7、flex:1 这个的意思就是说将剩余部分全部占用；假设header与footer各占88px（高度）那么main部分就占剩余页面的全部空间
8、order：排列顺序 跟z-index相似
9、align-self:这个是来控制某一个元素的对其方式
75、H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
width = device-width：宽度等于当前设备的宽度
initial-scale： 初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
严格按照这种写法来做
76、请你说一下标准盒模型与怪异盒模型的一个区别？他们的组成部分是如何组成的
标准盒模型：content+border+padding
怪异盒模型：content
一个算盒子的宽度的时候加上border和padding另一个不加
怪异盒模型实现：box-sizing:border-box
标准盒模型：box-sizing:content-box
77、html+css经典布局
1）左列定宽 右列自适应----------------->悬挂式布局
2）两列定宽 中间自适应---------------->圣杯布局
78、响应式布局特点
设计特点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
79、移动端布局的方式有哪几种
vw ：视窗宽度，1vw等于视窗宽度的1%。
rem：根据根元素字体的大小来设置元素的宽度和高度
80、rem布局的一个缺点
1）做出来的效果与效果图有些许偏差。
2）雪碧图定位问题
3）rem单位最好不用在PC端
81、请写出几种渐变的属性
线性渐变：linear-gradient
径向渐变：radial-gradient
重复性渐变：repeating-linear-gradient repeating-radial-gradient
82、请写出2D中常用的属性和属性值，并写出每个的意思
transform:translate-----------------位移
transform:rotate--------------------旋转
transform:skew----------------------变形
transform:scale---------------------放大缩小
83、如何控制2D或3D中的变形原点
transform-origin
84、3D种景深效果的属性及概念？
perspective:
-webkit-perspective:
近大远小
85、animation动画由哪几部分组成？animation的简写每个值代表什么？
keyframes animation两部分组成
animation:动画名称 动画持续时间 动画类型 延迟时间 定义是否循环 动画运动方向
86、animation和transition的区别
相同点：都是随着时间改变元素的属性值。
不同点： transition需要触发一个事件(hover事件或click事件等)才会随时间改变其
css属性； 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。
