保姆级教程 CSS 知识点梳理大全，超详细！！！
source link: https://blog.csdn.net/m0_46374969/article/details/120542376
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
保姆级教程 CSS 知识点梳理大全，超详细！！！
✴️大家好,我是王同学，好久不见，趁着假期王同学把CSS 知识点梳理了一遍
✴️如果对你有帮助就给我点个赞吧，这样我们就互不相欠了
✴️星光不负赶路人，所有的幸运都来自于坚持不懈的努力，大家一起加油吧
一、前端三层
二、CSS的书写位置
(一)、内嵌式
- 内嵌式，顾名思义，内嵌在.html文件中
- 在
<head></head>标签中，书写<style></style>标签对，里面书写CSS语句。
(二)、外链式
-
可以将CSS单独存为.css文件，然后用link标签引入它
-
外链式的优点：多个HTML文件，可以共用一个CSS样式表文件
(三)、 导入式
导入式是最不常见的样式表导入方法,使用导入式引入文件，不会等待CSS文件加载完毕，而是会立即渲染HTML结构
(四)、行内式
行内式： 样式可以直接通过style属性写在标签上，行内式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式，所以不常用。
三、CSS选择器
首先我们来介绍传统的CSS2.1 选择器
（一）、标签选择器
标签选择器：又称元素选择器，类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有的标签
标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅
标签选择器的覆盖面非常大，所以通常用于标签的初始化
（二）、id选择器
- 标签可以有id属性，它是这个标签的唯一标识
- id的命名只能由字母、数字、下划线、短横线构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母
- 同一个页面上不能有相同的id标签
- CSS选择器可以使用#井号选择指定的id标签
（三）、类选择器
- class属性表示类名
- 类名的命名规范和id的命名规范相同
- 我们使用点.前缀来指定class的标签
- class类名十分灵活，多个标签可以为相同的类名
- 同一个标签可以同时属于多个类，类名用空格隔开
在开发中我们也用到过原子类，这里简单的介绍一下
（四）、原子类
-
在做网页前、可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类。
-
在HTML标签就可以“则需选择”它的类名，这样可以非常快速的添加一些常见的样式
<style>
.fs18 {
font-size: 18px;
}
.fs20 {
font-size: 20px;
}
.fs22 {
font-size: 22px;
}
.fs24 {
font-size: 24px;
}
.fs26 {
font-size: 26px;
}
.color-blue {
color: blue;
}
.color-red {
color: red;
}
.color-orange {
color: orange;
}
.color-pink {
color: pink;
}
.color-purple {
color: purple;
}
</style>
</head>
<body>
<p class="fs18 color-blue">好好学习 天天向上</p>
<p class="fs20 color-red">好好学习 天天向上</p>
<p class="fs22 color-orange">好好学习 天天向上</p>
<p class="fs24 color-pink">好好学习 天天向上</p>
<p class="fs26 color-purple">好好学习 天天向上</p>
</body>
（五）、复合选择器
后代选择器
交集选择器
并集选择器
并集选择器也叫做分组选择器，逗号表示分组
（六）、伪类选择器
伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊的状态
a 标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效的问题
<style>
a:link {
color: rgb(255, 0, 242);
}
a:visited {
color: red;
}
a:hover {
color: pink;
}
a:active {
font-size: 40px;
color: green;
}
</style>
</head>
<body>
<p>
<a href="http://www.baidu.com"> 百度</a>
</p>
<p>
<a href=" http://www.jd.com"> 京东</a>
</p>
<p>
<a href="http://www.taobao.com"> 淘宝</a>
</p>
<p>
<a href="http://www.jd.com"> 慕课</a>
</p>
</body>
（七）、元素关系选择器
（七）、子选择器
当使用 >符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系
（八）、相邻兄弟选择器
- 相邻兄弟选择器（+）介于两个选择器之间，当第二个元素紧跟着第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。
- 说白了，a+b就是选择紧跟在a后面的一个b
(九）、通用兄弟选择器（~）
通用兄弟选择器（~）,a~b选择a元素之后所有同层级b元素
（十）、序号选择器
（十一）、：first-child
first-child表示选择第一个子元素，比如下面的例子就是表示选择.box盒子中的第一个p
(十二)、：last-child
：last-child表示选择最后一个子元素，比如下面的例子
（十二）、： nth-child()
： nth-child()可以选择任意序号的子元素
：nth-child()可以写成 an+b的形式，表示从b开始每个a选一个
<style>
.box p:first-child {
color: red;
}
.box p:last-child {
color: aqua;
}
.box p:nth-child(3) {
color: orange;
}
.box p:nth-child(2n) {
color: pink;
}
.box1 p:nth-child(2n+1) {
color: red;
}
</style>
</head>
<body>
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
<div class="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
（十三）、序号选择器的兼容性
（十四）、属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
[alt] 有这个属性
[alt ="背景故宫"] 精准匹配
[alt ^="abc"] 开头位置匹配
[alt $="abc"] 结尾位置匹配
[alt *="abc"] 任意位置匹配
[alt |="abc"] abc-开头
[alt ~="abc"] abc为空格分开的独立部分
*/
img {
width: 300px;
}
img[alt^="北京"] {
border: 5px solid purple;
}
img[alt$="夜景"] {
border: 5px solid rgb(236, 184, 12);
}
img[alt*="美"] {
border: 5px solid rgb(52, 5, 138);
}
img[alt |="参赛作品"] {
border: 5px solid rgb(224, 228, 9);
}
img[alt~="手机拍摄"] {
border: 5px solid pink;
}
</style>
</head>
<body>
<img src="images/bj/0.jpg" alt="北京故宫">
<img src="images/bj/1.jpg" alt="北京鸟巢">
<img src="images/bj/2.jpg" alt="北京十七孔桥">
<img src="images/wx/0.jpg" alt="参赛作品-无锡体育场">
<img src="images/wx/1.jpg" alt="手机拍摄 无锡太湖">
<img src="images/wx/2.jpg" alt="无锡美景">
<img src="images/wx/3.jpg" alt="无锡夜景">
</body>
</html>
（十五）、CSS3新增伪类
（十六）、伪元素
CSS3新增了伪元素特性，顾名思义，表示虚拟动态创建的元素
伪元素用双冒号表示，IE8可以兼容单冒号
：：before
：：after
（十七）、：：selection
（十八）、：：first-letter和：：first-line
三、层叠性和选择器权重的计算
- CSS全名叫做“层叠样式表”，层叠性是他很重要的性质
- 层叠性：多个选择器可以同时作用于同一个标签，效果叠加
如果多个选择器的定义有冲突呢？CSS有严密的处理规则
复杂选择器的计算
复杂选择器可以通过（ID的个数，class的个数，标签的个数）的形式，计算权重
四、文本与字体属性
（一）、常用的文本字体属性
-
color属性可以设置文本内容的前景色
-
color属性主要用于英语单词、十六进制、rgba()、rgb() 等表示方法
-
用英语单词表示法，比如：color：red；仅仅用于学习时临时设置一下颜色，工作时不用这样的形式，因为追求精确。
（二）、十六进制表示法
十六进制表示法是所有设计软件中常用的颜色表示方法，设计师给我们的设计上面标注的图标颜色，通常为十六进制
（三）、rgb() 表示法
（四）、rgba()表示法
颜色可以使用rgba（） 表示法，最后一个参数表示透明度，介于0-1之间，0表示纯透明，1表示纯实心
（五）、font-size属性
font-size属性用来设置字号，单位为px 后面还会说到em和rem
网页文字正文字号通常是16px浏览器最小支持10px
（六）、font-weight属性
- font-weight属性设置字体的粗细程度，通常就用normal和bold两个值
（七）、font-style属性
作用：设置文字的倾斜
（八）、text-decoration属性
text-decoration属性用于设置文本的修饰外观的（下划线，删除线）
（九）、font-family属性
- font-family属性用于设置字体的属性
- 字体可以是列表的形式，一般英语字体放到前面，后面的字体是前面的字体的后备字体
- 字体名称中有空格，必须要用引号来包裹
font-family：" 微软雅黑";
font-family: serif,"Times New Roman","微软雅黑";
中文字体也可以称呼他们的名字
字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体的较多，设置成其他字体的较少
问题一：如何设置为用户电脑中没有的字体呢？那就必须自己定义新的字体，这就需要我们有字体文件，当用户加载网页的时候，会同时下载这些字体
定义字体，当我们拥有以下字体文件之后，就可以使用@font-face定义字体
（十）、阿里巴巴普惠体
阿里巴巴提供了一套免费商用授权的普惠字体，网址 https://www.iconfont.cn/webfont#!/webfont/index
使用阿里巴巴普惠字体也省去了下载的麻烦
使用步骤：
下载字体—使用font-face声明字体—定义使用 webfont 的样式—为文字加上对应的样式
第一步：下载字体
第二步：使用font-face声明字体（注意：在引用的时候要注意引用的路径哦）
第三步：定义使用 webfont 的样式
第四步：为文字加上对应的样式
（十一）、text-indent属性
（十二）、 line-height行高
- line-height属性的单位可以是px为单位的数值
line-height：30px;
- line-height属性的单位可以是 没有单位是数值，表示字号的倍数，这是最推荐的写法
line-height：1.5;
- line-height属性也可以是百分数，表示字号的倍数
line-height：150%;
（十三）、单行文本垂直居中
行高等于盒子的高度，设置单行文本垂直居中对齐
设置text-align：center，即可实现文本水平居中
（十四）、font合写属性
（十五）、继承性
- 文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有的标签中生效。
- 因为文字相关的属性都有继承性，所以通常会设置body标签的字号、颜色、行高等、这样就能当做整个网页的默认样式了。
（十五）、继承性的就近原则
在继承的情况下，选择器权重计算失效，就近原则
五、盒子模型
（一）、什么是盒子模型
所有的HTML标签都可以看成矩形盒子，由width，height，padding、border构成，称为盒子模型
（二）、width属性
-
width属性表示盒子内容的宽度
-
width属性的单位通常是px，移动端开发也会涉及到百分数、rem等单位
-
当块级元素（div 、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承
（三）、height属性
-
height属性表示盒子内容的高度
-
height属性的单位通常是px，移动端开发也会涉及到百分数、rem等单位
-
盒子的height属性如果不设置的话，它将自动被内容撑开，如果没有内容，默认是0
（四）、padding属性详解
-
padding属性是盒子的内边距，即盒子边框内壁到文字的距离
-
padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding
-
padding属性如果用数值以空格隔开进行设置，分别表示 上、左右、下的padding
-
padding属性如果要用二个数值以空格隔开进行设置，分别表示上下、左右的padding
（五）、margin属性详解
margin是盒子的外边距，即盒子与其他盒子的距离
margin的塌陷问题
竖直方向的margin有塌陷的现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准
（六）、一些元素有默认的margin
一些元素（比如body、ul、p等)都有默认的margin，在开始制作网页的时候，要将他们清除
（七）、盒子的水平居中
将盒子的左右两边的margin都设置为0，盒子将水平居中
文本居中是text-align：center; 和盒子水平居中是两个概念
盒子的垂直居中 我们需要使用绝对定位来实现 后面我们细说
（八）、盒模型的计算
（九）、box-sizing属性
给盒子添加了box-sizing：border-box属性之后，盒子的width、height数字就表示盒子实际占有的宽高（不包含margin）了，即padding、border变为内缩，不再外扩。
box-sizing属性大量用于移动网页的制作中，因为它结合百分比布局，弹性布局等非常好用，在PC页面中使用较少。
（十）、行内元素和块级元素
（十一）、行内块
img和表单元素是特殊的行内块，他们既能设置宽度和高度，也能够并排显示
（十二）、行内元素和块级元素的相互转换
-
使用display：block；可以将元素转换为块级元素
-
使用display：inline；可以将元素转换为行内元素，将元素转换为行内元素的不多见
-
使用display：inline-block；可以将元素转换为行内块元素
（十三）、元素的隐藏
-
使用display：none；可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样
-
使用visibility：hidden；也可以将元素隐藏，但是元素不放弃自己的位置
六、浮动与定位
（一）、浮动
- 浮动的本质：用来实现并排的效果
- 浮动使用的要点：要浮动，并排的盒子都实现浮动
- 父盒子要有足够的宽度，否则子盒子会掉下去
（二）、浮动的顺序贴靠特性
子盒子会按顺序进行贴靠，如果没有足够的空间，则会寻找前一个兄弟元素
如下图所示：3号盒子会掉到2号盒子的下面
（三）、浮动的元素一定能设置宽高
浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档，一律能够设置宽度和高度，即使他是a标签或span标签
（四）、右浮动
（五）、使用浮动的注意事项
-
垂直显示的盒子，不要设置浮动、只有并排显示的盒子才要设置浮动
-
“大盒子带着小盒子跑”，一个大盒子中、又是一个小天地，内部可以继续使用浮动
-
div是免费的，不要节约盒子
（六）、BFC规范
BFC规范（Box-Formatting Context 块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
观察下面的例子
出现以上问题的原因
-
一个盒子不设置height，当内容子元素都浮动时，无法撑起自身
-
这个盒子没有形成BFC
（七）、如何创建BFC？
（七）、清除浮动
清除浮动：浮动一定要封闭到一个盒子中，否则会对页面后续元素产生影响
来猜一下页面中会出现什么样的效果？
大家应该都会说两行两列？然而没有清除浮动就成行显示了！出现以下这种情况是没有清除浮动
清除浮动的方法一：
清除浮动的方法二：
使用方法二的副作用：margin会失效
清除浮动的方法三：
<style>
* {
margin: 0;
padding: 0;
}
.clearfix::after {
content: '';
clear: both;
display: block;
}
p {
float: left;
width: 100px;
height: 100px;
background-color: pink;
margin-right: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="clearfix">
<p></p>
<p></p>
</div>
<div class="clearfix">
<p></p>
<p></p>
</div>
清除浮动的方法四：
（八）、相对定位
相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位
位置词描述：值可以是负数，即往规定方向相反移动
相对定位的性质：相对定位的元素，会在老家留坑，本质上任然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成影子，不会对页面元素产生任何影响。
（九）、相对定位的用途
-
相对定位用来微调元素位置
-
相对定位的元素，可以当做绝对定位的参考盒子
（十）、绝对定位
绝对定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置
绝对定位的位置描述词
绝对定位的元素脱离标准文档流
绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖
绝对定位的参考盒子
-
绝对定位的盒子并不是永远以浏览器作为基点
-
绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点，这个盒子通常是相对定位的，所以这个性质也叫做子绝父相
绝对定位的盒子垂直居中
绝对定位的盒子垂直居中是一个非常实用的技术
堆叠顺序 z-index属性
z-index属性是一个没有单位的正整数，数值大的能够压住数值小的
（十一）、绝对定位脱离标准文档流
绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖
脱离标准文档流的方法：浮动、绝对定位、固定
定位
（十二）、绝对定位的用途
- 绝对定位用来制作压盖、遮罩的效果
- 绝对定位用来结合CSS精灵使用
- 绝对定位可以结合JS实现动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
.carousel {
position: relative;
width: 650px;
height: 360px;
border: 1px solid #000;
margin: 40px auto;
}
.carousel .btn {
position: absolute;
width: 40px;
height: 40px;
margin-top: -20px;
top: 50%;
border-radius: 50%;
text-align: center;
line-height: 40px;
background-color: rgba(255, 255, 255, .5);
/* 鼠标变为小手状态 */
cursor: pointer;
font-size: 26px;
font-family: consolas;
}
.carousel .btn:hover {
background-color: gold;
color: #fff;
}
.carousel .leftbtn {
left: 10px;
}
.carousel .rightbtn {
right: 10px;
}
.carousel ol {
position: absolute;
width: 120px;
height: 20px;
right: 20px;
bottom: 20px;
list-style: none;
}
.carousel ol li {
float: left;
width: 20px;
height: 20px;
background-color: rgba(255, 255, 255, .5);
border-radius: 50%;
margin-right: 10px;
}
.carousel ol li.current {
background-color: gold;
}
</style>
</head>
<body>
<div class="carousel">
<img src="images/bj/0.jpg" alt="">
<a class="leftbtn btn"> <</a>
<a class="rightbtn btn">></a>
<ol>
<li></li>
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
（十一）、固定定位
固定定位：不管页面如何滚动、他都永远固定在那里
固定定位脱离标准文档流
固定定位的用途：“返回顶部”、“楼层导航”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: fixed;
width: 100px;
height: 100px;
right: 0;
bottom: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<p> <img src="images/bj/0.jpg" alt=""></p>
<p> <img src="images/bj/0.jpg" alt=""></p>
<p> <img src="images/bj/0.jpg" alt=""></p>
<p> <img src="images/bj/0.jpg" alt=""></p>
<p> <img src="images/bj/0.jpg" alt=""></p>
<p> <img src="images/bj/0.jpg" alt=""></p>
<p> <img src="images/bj/0.jpg" alt=""></p>
<p> <img src="images/bj/0.jpg" alt=""></p>
</body>
</html>
（七）、边框与圆角
（一）、border属性的三要素
（二）、线型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
border: 3px solid #000;
}
.box2 {
width: 200px;
height: 200px;
border: 3px dotted #000;
margin: 20px 0;
}
.box3 {
width: 200px;
height: 200px;
border: 3px dashed #000;
}
</style
</style>
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
（三）、边框的三要素小属性
（四）、四个方向的边框
（五）、四个方向边框的三要素小属性
（六）、去掉边框
border-left：none；属性可以去掉左边框，以此类推
（七）、利用边框制作三角形
（八）、圆角
border-radius属性的值通常为px单位，表示圆角的半径
border-radius:10px
单独设置四个圆角
圆角也可以用百分比为单位
border-radius属性的值也可以用百分比为单位，表示圆角起始于每条边的哪里
（九）、盒子阴影—box-shadow属性
box-shadow: inset 2px 2px 10px red, 4px 4px 10px blue, 6px 6px 10px yellow;
（十）、 过渡
transition过渡属性是CSS3浓妆重彩的特性，过渡可以为一个元素在不同样式之间变化添加自动补间动画
哪些属性可以参与过渡
-
背景颜色和文字颜色都可以被过渡
-
所有变形（包括2D和3D）都能被过渡
-
所有数值类型的属性，都可以参与过渡，比如width，height，left，top，border-radius
过渡的四个小属性
transition的第三个属性就是缓动参数，也就是变化速度曲线
（十一）、贝塞尔曲线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1200px;
overflow: hidden;
margin: 40px auto;
}
.box ul {
list-style: none;
}
.box ul li {
position: relative;
width: 380px;
height: 210px;
margin-right: 20px;
float: left;
}
img {
width: 380px;
height: 210px;
}
.box ul li .info {
position: absolute;
width: 370px;
height: 30px;
color: #fff;
line-height: 30px;
padding-left: 10px;
background-color: rgba(0, 0, 0, .5);
left: 0;
bottom: 0;
opacity: 0;
transition: opacity 0.5s linear;
}
.box ul li .info:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="images/bj/0.jpg" alt="">
<div class="info">北京的故宫</div>
</li>
<li><img src="images/bj/1.jpg" alt="">
<div class="info">十七孔桥</div>
</li>
<li><img src="images/bj/2.jpg" alt="">
<div class="info">国家大剧院</div>
</li>
</ul>
</div>
</body>
</html>
（十二）、背景固定— background-attachment
background-attachment属性决定着背景图像的位置是在视口内固定，还是随着包含它的区块滚动
（十二）— background-position属性
background-position属性可以设置背景图片出现在盒子的什么位置
可以用top、bottom、center、left、right描述图片出现的位置
（十三）、CSS精灵
CSS精灵：将多个小图标合并到一张图片上，使用background-position属性单独显示其中的一个，这样的技术叫做CSS精灵技术，也叫做CSS雪碧图
CSS精灵可以减少HTTP的请求数量，加快网页的显示速度，缺点也很明显：不方便测量，后期改动麻烦
（十四）、background综合属性
（十五）、背景裁切
background-clip属性用来设置元素的背景裁切到哪个盒子
（十六）、线性渐变
渐变的方向可以写成度数的形式
线性渐变可以有多个颜色值，并且可以使用百分数定义他们出现的位置
（十七）、浏览器私有前缀
不同的浏览器有不同的私有前缀，用来对试验性质的CSS属性加以标识
（十八）、径向渐变
（十九）、2D变形
（二十）、transform-origin属性
（二十一）、缩放变形
（二十二）、斜切变形
（二十三）、位移变形
（二十四）、3D旋转
perspective属性
perspective属性用来定义透视的强度，可以理解为人眼到舞台的距离，单位是px
（二十五）、空间移动
（二十六）、动画的定义
可以使用 @keyframes来定义动画， keyframes表示关键帧，在项目上线之前，要补上@-webkit-这样的私有前缀
动画的调用
定义动画之后，就可以使用animation属性调用动画
第五个参数就是动画的执行次数，如果想永远执行可以写infinite
（二十七）、多关键帧动画
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK