CSS基础语法-黑马跟课笔记-供记录与查询

一.CSS简介

1.1HTML局限性

只关注内容的语义，可以做简单的样式但是很臃肿且繁琐

1.2CSS优势

CSS层叠样式表，标记语言

设置HTML页面中的文本内容，图片外形，可以美化HTML，让页面布局更美观

HTML做框架，CSS做样式，结构与样式相分离

1.3CSS语法规范

两个部分组成：选择器和属性值

<style>p {color: red;font-size: 12px;}
</style>

选择器{

属性1：属性值1

属性2：属性值2

}

1.选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式

2.属性和属性值以“键值对”形式出现

3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等

4.属性和属性值之间用英文“:”分开

5.多个键值对之间用“;"分开

1.4CSS代码风格

1.展开格式写

2.字母小写

3.空格规范：

     1.属性值前面，冒号后面，保留一个空格

      2.选择器标签和大括号中间保留空格

二.CSS基础选择器

2.1CSS选择器的作用

<div>我是div</div>
<div>我是div</div>
<p>我是段落</p>
<ul><li>我是ul里面的li</li><li>我是ul里面的li</li>
</ul>
<ol><li>我是ol里面的li</li><li>我是ol里面的li</li>
</ol>

问题：

1.我想把div里面的文字改为红色怎么办？

2.我想把第一个div里面的文字改为红色怎么办？

3.我想把ul里面的li文字改成红色怎么办？

选择器作用：

根据不同需求把不同的标签选出来

简单来说，选对人，做对事

 

2.2选择器分类

选择器分为基础选择器、复合选择器两大类

基础选择器是由单个选择器构成的

包括：标签选择器，类选择器，id选择器，通配符选择器

2.3标签选择器

标签名作为选择器

语法：

标签名{属性1：属性值1；属性2：属性值2；....
}

作用：

把某类标签全部选择出来

优点：

快速为页面中同类型标签统一设置样式

缺点：

不能设计差异化样式，只能选择全部的当前标签

能够回答1.我想把div里面的文字改为红色怎么办？问题

2.4类选择器

如果想要差异化选择不同的标签，单独选一个或某几个标签，可以定位使用类选择器

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.“号表示

.类名{属性1：属性值1；...
}

例如：将所有拥有red类的HTML元素均设置为红色（类似java方法调用）

.red {color: red;
}
<li class="red"></li>

注意：

1.长名称或词组可以使用中横线来为选择器命名。

2.不要使用纯数字，中文等命名，尽量使用英文字母来表示。

3.命名要有意义，尽量让别人一眼就知道这个类名的目的

多类名

<div class="类名1 类名2">

使用场景：

1.可以把一些标签元素相同的样式（共同的部分）放到一个类里面

2.这些标签都可以调用这个公共的类，然后再调用自己的独有的类

3.从而节省CSS代码，统一修改也非常方便

2.5ID选择器

HTML元素以ID属性来设置ID选择器，CSS中id选择器以“#”来定义

语法

#id名{属性1：属性值1；...
}

例如，将id为nav元素中的内容设置为红色

#nav{color: red;
}
<div id="nav"></div>

特点：只能调用一次，别人切勿使用

id选择器和类选择器的区别

1.类选择器像姓名，可以重名；id选择器像身份证号，不可以重复

2.类最多，id一般用于页面唯一性的元素上

2.6通配符选择器

表示选取页面中所有元素（标签）

* {属性1：属性值1；...
}

基础选择器	作用	特点	用法
标签选择器	可以选出所有相同的标签	不能差异化选择	p{ color:red;}
类选择器	可以选出一个或者多个标签	可以根据需求选择	.nav{color:red;}
id选择器	一次只能选择一个标签	ID属性只能子啊每个HTML文档中出现一次	#nav{color:red;}
通配符选择器	选择所有的标签	适用于默认初始化	*{color:red;}

三、CSS字体属性

3.1字体系列

CSS使用 font-family 属性定义文本的字体系列、大小、粗细和文字样式

    <style>h2 {font-family: '微软雅黑';}p {font-family: '宋体';}</style>

1.各种字体之间必须使用英文状态下的逗号隔开

2.一般情况下，如果有空格隔开的多个单词组成的字体，加引号

3.尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

4.最常见的几个字体：

body{font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';
}

3.2字体大小

CSS使用 font-size 属性定义字体大小

p {font-size: 20px;
}

1.px(像素)大小是我们网页最常用的单位

2.谷歌浏览器默认的文字大小为16px

3.不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小

4.可以给body制定整个页面文字的大小，标题标签特殊，需要单独设置大小

3.3字体粗细

CSS使用 font-weight 属性设置文字

属性	功能
normal	正常的字体，相当于数字值400
bold	粗体，数字值700
bolder	比继承值更重的值
lighter	比继承值更轻的值
<integer>	用数字表示文本字体粗细 取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

实际开发中，更提倡使用数字

p {font-weight: 700;font-weight: bold;
}

3.4文字样式

CSS使用font-style来设置字体风格

p {font-style: normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式

3.5字体复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码

body{font: font-style font-weight font-size/line-height font-family;倾斜、粗细、大小、字体
}

1.使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开

2.不需要设置的属性可以忽略（取默认值），但必须保留font-size和font-famliy属性，否则font属性将不起作用

3.6字体属性小结

属性	表示	注意点
font-size	字号	单位px
font-family	字体
font-weight	字体粗细	加粗700或bold，不加粗normal或400
font-style	字体样式	倾斜italic，不倾斜normal
font	字体连写	1.连写有顺序 2.字号和字体必须同时出现

四.CSS文本属性

CSS文本属性可以定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

4.1文本颜色

div {color: red;
}

表示	属性值
预定义的颜色值	red,green,blue
十六进制	#FF0000
RGB代码	rgb(255,0,0)

4.2对齐文本

text-align用于设置元素内文本内容的水平对齐方式

div{text-align: center;
}

属性值	解释
left	左对齐
right	右对齐
center	居中对齐

4.3装饰文本

text-decoration规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等

div {text-decoration: underline;
}

属性值	描述
none	默认。没有装饰线（取消链接的下划线）
underline	下划线
overline	上划线
line-through	删除线

4.4文本缩进

text-indent用来指定文本的第一行的缩进，通常是将段落的首行缩进

div {text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值

p {text-indent: 2em;
}

em是一个相对单位，就是当前元素(font-size)1个文字的大小，如果当前元素没有设置大小，会按照父元素的1个文字大小

4.5行间距

line-height用于设置行间的距离（行高），可以控制文字行与行之间的距离

p {line-height: 26px;
}

行间距：上间距+文本间距+下间距

4.6文本属性总结

属性	表示	注意点
color	文本颜色	我们通常用十六进制比如#FF0000
text-align	文本对齐	可以设定文字水平的对齐方式
text-indent	文本缩进	通常我们用于段落首行缩进两个字的距离 text-indent: 2em;
text-decoration	文本修饰	记住添加下划线underline 取消下划线none
line-height	行高	控制行间距

五.CSS三种样式表

1.行内样式表(行内式)

2.内部样式表(嵌入式)

3.外部样式表(链接式)

5.2内部样式表

写到html页面内部，把所有的CSS代码抽取出来，单独放到一个<style>标签中

<style>
</style>

1.<style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中

2.通过此种方式，可以方便控制当前整个页面中的元素样式设置

3.代码结构清晰，并没有实现结构与样式完全分离

5.3行内样式表

<div style="color: red;font-size: 12px;"></div>

1.style就是标签的属性

2.在双引号中间，写法要符合CSS规范

3.可以控制当前标签的设置样式

4.书写繁琐，没有体现结构与样式相分离

5.4外部样式表

实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用

引入外部样式表分为两步：

1.新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中

2.在HTML页面中，使用<link>标签引入这个文件

<link rel="stylesheet" href="css文件路径">

rel:定义当前文档与被连接文档之间的关系，在这里要制定"stylesheet",表示被连接文档是一个样式表文件

href：定义所连接外部样式表文件的url，可以是相对路径，也可以是绝对路径

​

---

水平线标签​

六.Chrome调试工具

1.Ctrl+滚轮调整工具大小

2.左边HTML结构，右边CSS

3.右边CSS可以改动数值和查看颜色

4.Ctrl+0复原浏览器大小

5.如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误

6.如果有样式，但是样式前面有黄色叹号提示，则样式属性书写错误

七.Emmet

7.1快速生成HTML结构标签

a.生成标签 直接输入标签名 +tab键

b.如果想要生成多个相同标签 加上就可以了，比如div3 tab就可以快速生成3个diV

c.如果有父子级关系的标签，可以用>比如ul>li tab就可以了

d.如果有兄弟关系的标签，用+就可以了比如div+p tab

e.如果生成带有类名或者id名字的，直接写demo或者#two tab就可以

f.如果生成的div类名是有顺序的，可以自增符号​5

g.标签加大括号tab自动包括大括号里内容 div($}*5

7.2快速生成CSS语法

初学者不建议使用，会记不住单词

八.CSS的复合选择器

8.1什么是复合选择器

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的

1.复合选择器可以更准确，更高效选择目标元素

2.复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

3常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器

8.2后代选择器(重要)

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。 语法:

元素1 元素2{ 样式声明 }

上述语法表示选择元素1里面的所有元素2（后代元素)

ul li{ 样式声明 } /* 选择ul里面所有的li标签元素*/

1.元素1和元素2中间用空格隔开

2.元素1是父级，元素2是子级，最终选择的是元素2

3.元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可

8.3子选择器(重要）

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素 语法:

上述语法表示选择元素1 里面的所有直接后代(子元素)元素2 例如:

元素1>元素2(样式声明}

上述语法表示选择元素1 里面的所有直接后代(子元素)元素2 例如:

div > p { 样式声明 } /* 选择div里面所有最近以及p标签元素*/

1.元素1和元素2中间用大于号隔开 2.元素1是父级，元素2是子级，最终选择的是元素2 3.元素2必须是亲儿子，其孙子、重孙之类都不归他管.你也可以叫他亲儿子选择器

8.4并集选择器(重要）

并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明 并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分 语法:

元素1，元素2{样式声明}

上述语法表示选择元素1和元素2 例如:

ul,div{样式声明} /*选择ul和 div标签元素*/

1.元素1和元素2中间用逗号隔开 2.逗号可以理解为和的意思 3.并集选择器通常用于集体声明

8.5伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素. 伪类选择器书写最大的特点是用冒号(:)表示，比如:hover、 :first-child。 因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器

8.6 链接伪类选择器

a:link      /*选择所有未被访问的链接*/
a:visited   /*选择所有已被访问的链接*/
a:hover     /*选择鼠标指针位于其上的链接*/
a:active    /*选择活动链接(鼠标按下未弹起的链接)*/
​
一链接伪类选择器注意事项
二链接伪类选择器实际开发中的写法

链接伪类选择器注意事项

1.为了确保生效，请按照LVHA的循顺序声明:link -:visited -:hover - :active。

2.记忆法:lovehate或者Iv包包hao。

3因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

链接伪类选择器实际工作开发中的写法

/*a是标签选择器 所有的链接*/
a {color: gray;
}
/* :hover是链接伪类选择器 鼠标经过*/
a:hover{color: red;/*鼠标经过的时候，由原来的灰色变成红色*/
}

8.7 :focus伪类选择器

：focus伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器主要针对表单元素来说

input:focus {background-color: yellow;
}

8.8复合选择器总结

选择器	作用	特征	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	符号是空格
子代选择器	选择最近一级元素	只选亲儿子	符号是大于
并集选择器	选择某些相同样式的元素	可以用于集体声明	符号是逗号
链接伪类选择器	选择不同状态的链接	跟链接相关	重点记住 a{}和a:hover实际开发的写法
:focus选择器	选择获得光标的表单	跟表单相关	input:focus记住这个写法

九.CSS元素显示模式

9.1什么是元素显示模式

作用：网页的标签非常多，在不用地方会用到不同类型的标签，了解他们的特点可以更好地布局我们的网页

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>

HTML元素一般分为块元素和行内元素两种类型

9.2块元素

<h>~~~<h6> <p><div><ul><ol>等

​

​

块级元素的特点：

1.比较霸道，自己独占一行

2.高度宽度，外边距以及内边距都可以控制

3.宽度默认是容器（父级宽度）的100%

4.是一个容器和盒子，里面可以放行内或者块级元素

注意：

1.文字类的元素内不能使用块级元素

2.<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别不能放<div>

3.同理，<h1>这些文字类块级标签里面也不能放其它块级元素

9.3行内元素

<a><strong><b><em>这都是行内元素

特点：

1.相邻行内元素在一行上，一行可以显示多个

2.高和宽直接设置是无效的

3.默认宽度就是它本身内容的宽度

4.行内元素只能容纳文本或其它行内元素

注意：

1.链接里面不能再放链接

2.特殊情况链接<a>里面可以放块级元素

9.4行内块元素

<img/><input/><td>同时具有块元素和行内元素的特点

特点：

1.和相邻行内元素在一行上，但会有空白缝隙，一行可以显示多个（行内元素特点）

2.默认宽度就是它本身内容的宽度（行内元素特点）

3.高度行高外边距以及内边距都可以控制（块级元素特点）

9.5元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个块级元素	不可以设置宽高	本身内容宽度	容纳文本或其它行内元素
行内块元素	一行放多个行内快元素	可以	本身内容宽度

9.6元素模式转换

display: block;
/*行内元素转换为块级元素*/
display: inline;
/*块级元素转换为行内元素*/
display: inline-block;
/*转换为行内块元素*/

十.CSS背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

10.1背景颜色

background-color: 颜色;

10.2背景图片

background-image: url(图片地址);

10.3背景平铺

background-repeat: repeat| no-repeat | repeat-x | repeat-y

10.4背景位置

background-position: x y;x y可以使用方位名词或者精确单位

参数值	说明
length	百分数|由浮点数字和单位标识符组成的长度值
position	top|center|bottom|left|center|right 方位名词

1.参数是方位名词

1.如果指定的两个值都是方位名词，则两个值前后顺序无关

2.如果只制定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2.参数是精确坐标

1.第一个是x坐标，第二个是y坐标

2.第一个是X坐标，第二个默认垂直居中

3.混合单位

第一个是x坐标，第二个是y坐标

10.5背景图像固定（背景附着）

background-attachment : scroll | fixed

设置背景图像是否固定或者随着页面的其余部分滚动

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

10.6背景复合写法

节约代码

background:背景颜色 图片地址 背景平铺 图像滚动 图片位置

10.7背景颜色半透明

background: rgba(0, 0, 0, 0.3);

最后一个参数是alpha透明度，取值在0-1之间

注意：把背景半透明是指盒子背景半透明，盒子里面的内容不受影响

10.8背景总结

属性	作用	值
background-color	背景颜色	color
background-image	背景图片	url
background-repeat	是否平铺	repeat/ no repeat/repeat-x/repeat-y
background-position	背景位置	length/position
background-attachment	背景附着	scroll/fixed
背景简写	书写更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明	背景颜色半透明	background:rgba(0,0,0,0.3);

十一、CSS三大特性

11.1层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则：

1.样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

2.样式不冲突不会重叠

<style>div {color: red;font-size: 12px;}div {color: pink;就近原则保留pink，层叠掉red}
</style>

11.2继承性

子标签会继承父标签的某些样式：例如文本颜色，大小等

1.恰当使用继承可以简化代码，降低CSS样式的复杂性

2.子元素可以继承父元素的样式，text-,font-,line-,这些元素开头的可以继承，以及color属性

特殊继承：行高继承

<style>div {font: 14px/1.5 '微软雅黑';行高14*1.5px}p {font: 12px;行高会改变为12*1.5px}
</style>

运用继承性，可以方便子类修改字体大小，根据字体大小自动改变行高而不用修改行高

11.3优先级

选择器	选择器权重
继承或者*	0
元素选择器	1
类选择器，伪类选择器	10
ID选择器	100
行内样式style=“”	1000
!important重要的	最高级

注意点：

1.权重是有4组数字组成，但是不会有进位

2.继承的权重为0，不管父类权重有多大，子类都是继承权重都是0

权重叠加

复合选择器有权重叠加，但不会进位

<style>ul li {权重：0001+0001color: red;}li {权重：0001color: green;}
</style>

十二、盒子模型

12.1看透网页布局的本质

网页布局过程：

1.先准备好相关的网页元素，网页元素基本都是盒子Box

2.利用CSS设置好盒子样式，然后摆放到相应位置

3.往盒子里面装内容

网页布局的核心本质：就是利用CSS摆盒子

12.2盒子模型组成

盒子模型：就是把html页面中的布局元素看作是一个矩形的盒子，也就是一个橙装内容的容器

CSS盒子本质上是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距和实际内容

构成	作用
border边框	盒子的外边框
content内容	盒子内的元素
padding内边距	盒子内元素与外边框的距离
margin外边距	盒子与盒子之间的距离

1.边框border

border可以设置元素的边框，有三部分组成：边框宽度，边框样式，边框颜色

语法

border: border-width || border-style || border-color

属性	作用
border-width	定义边框粗细单位像素
border-style	边框的样式 solid实线 dashed虚线 dotted点线
border-color	边框颜色

缩写

border: 1px solid blue;

border-top 上边框，其余同理

2.表格的细线边框table

表格table就是一个盒子，table的边框就是border

border-collapse细线边框 合并相邻的边框

table,td {border: 1px solid blue;border-collapse;合并相邻边框，像素不会叠加
}

3.边框会影响盒子的实际大小

盒子是固定大小的，边框是在盒子的外围增加

4.内边距

padding属性用于设置内边距

padding-left: 20px;

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上
padding-bottom	下

缩写：

值的个数	表达意思
padding: 5px;	表示上下左右内边距都是5px
padding: 5px 10px;	上下是5，左右10
padding: 5px 10px 20px;	上5，左右10，下20
padding: 5px 10px 20px 30px;	上5右10下20左30 顺时针

padding也是会影响盒子实际大小的，会把盒子撑大

好处：给盒子设定padding，元素字数不同大小不同，盒子会自动增扩

当没有设置盒子指定大小

padding不会影响盒子大小

5.外边距

margin属性用于设置盒子外边距

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上
margin-bottom	下

值的个数	表达意思
margin: 5px;	表示上下左右外边距都是5px
margin: 5px 10px;	上下是5，左右10
margin: 5px 10px 20px;	上5，左右10，下20
margin:5px 10px 20px 30px;	上5右10下20左30 顺时针

6.外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

1.盒子必须指定宽度

2.盒子左右外边距都设置为auto

.header { width: 960px; margin:0 auto; }

常见的写法：

1.margin-left: auto;margin-right: auto;

2.margin:auto;

3.margin:0 auto;

7.外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案：

1.可以为父元素定义上边框

2.可以为父元素定义上内边框

3.可以为父元素添加overflow:hidden

8.清除内外边距

网页元素很多带有默认的内外边距，不同浏览器默认的值也不一样，

因此在布局之前，首先要清除网页元素的内外边距

* {margin: 0;padding: 0;
}

CSS第一行代码

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了

12.3PS操作

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}

新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。

十三、盒子模型

13.1圆角盒子

语法

border-radius：length;
length:50px或者50%;
百分比代表盒子宽度和高度的百分比

border-radius属性用于设置元素的外边框圆角

13.2盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置
v-shadow	必需，垂直阴影的位置
blur	模糊距离
spread	阴影的尺寸
color	阴影的颜色
inset	外部阴影改为内部阴影

13.3文字阴影

text-shadow

语法

text-shadow:h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置
v-shadow	必需，垂直阴影的位置
blur	模糊距离
color	阴影的颜色

十四、CSS浮动

1、浮动

1.1传统网页布局的三种方式

网页布局的本质，用CSS来摆放盒子，把盒子摆放到相应位置

CSS提供了三种传统布局方式

1.2标准流（普通流、文档流）

标签按照规定好的默认方式排列

1.块级元素会独占一行，从上向下顺序排列

2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘自动换行

标准流最基本的布局方式

1.3为什么需要浮动

1.如何让多个块元素并列一行

1.用标准流的块元素转行内块，但是会有间隙

2.如何实现两个盒子的左右对齐

总结：有很多布局效果，标准流没办法完成，但浮动可以，因为浮动可以改变布局的默认方式

网页布局第一准则：多个块级元素纵向排列标准流，横向排列浮动

1.4什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

语法

选择器 { float: 属性值；}

属性值	描述
none	元素不浮动
left	元素向左浮动
right	元素向右浮动

1.5浮动特性（重难点）

1.浮动元素会脱离标准流

2.浮动元素会一行内显示并且元素顶部对齐

3.浮动的元素会具有行内块元素的特性

（如果不给浮动盒子设置宽度，那么盒子大小由盒子内元素大小决定）

最重要的特性

1.脱离标准普通流的控制移动到指定位置，俗称脱标

2.浮动的盒子不再保留原先的位置

第一个盒子加了浮动以后浮在空中，第二个盒子就顶上去变成了第一个盒子

第一个盒子就会压住第二个盒子

1.6浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，我们网页布局一般采取的策略是

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

2.常用网页布局

2.1常用网页布局

top banner box footer

3.清除浮动

3.1为什么要清除浮动

1.父级没高度

2.子盒子浮动了

3.影响下面布局了

3.2清除浮动本质

1.本质上是清除浮动元素脱离标准流造成的影响

2.如果父盒子本身有高度，则不需要清除浮动

3.清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流

3.3清除浮动

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素
both	清除左右

清楚浮动的策略是：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

方法：

1.额外标签法

2.父级添加overflow

3.父级添加after伪元素

4.父级添加双伪元素

额外标签法（隔墙法）不推荐，结构化较差

在一行浮动之后添加一个新标签，调用clear：both

父级添加overflow

子不教父之过

overflow:hidden\auto;

缺点：无法显示溢出的部分

after伪元素法（直接复制代码，常用）

升级版额外标签法

.clearfix: after {content: "";display: block;height: 0;clear: both;visibility: hidden;
}
.clearfix {*zoom: 1;
}

优点：没有增加标签，结构更简单

双伪元素清除浮动

.clearfix:before,.clearfix:after {content: "";display: table;
}
.clearfix:after {clear: both;
}
.clearfix{*zoom: 1;
}

代码更简洁

css书写顺序（重点）

1.布局定位属性：display/position/float/clear/visibility/overflow

2.自身属性：width/height/margin/padding/border/background

3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word/

4.其他属性：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient

设计布局整体思路

1.可视化区域，版心

2.分析页面中的行模块，以及每个行模块中的列模块，页面布局第一准则

3.一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则

4.制作html结构，我们遵循先有结构后有样式的原则

十五、定位

1.为什么要定位

1.一个模块盖住另一个模块

2.滚动窗口时某个模块固定在屏幕的某个位置

1.浮动可以让多个块级盒子并列一行没有缝隙排列显示，经常用于横向排列盒子

2.定位是可以让盒子自由地在某个盒子内移动位置或者固定屏幕中某个位置，压住其他盒子

2.定位组成

定位=定位模式+边偏移

定位模式：

决定元素的定位是，通过position

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

边偏移就是定位的盒子移动到最终位置

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底端偏移量，定义元素相对于其父元素下边线的距离
left	left:80px	左端偏移量，定义元素相对于其父元素左边线的距离
right	right:80px	右端偏移量，定义元素相对于其父元素右边线的距离

3.静态定位static(了解)

默认定位方式，无定位

按照标准流特性摆放位置，没有边偏移

很少用到

4.相对定位relative(重要)

相对定位，元素在移动位置的时候，相对于它原来的位置来说

给绝对定位当父类

特点：

1.相对于自己原来的位置移动的

2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待他（不脱标，继续保留原来位置）

5.绝对定位absolute(重要)

移动，相对于祖先元素来说

特性：

1.如果没有祖先元素，或者祖先元素没有定位，就以浏览器为准定位

2.如果祖先元素有定位，则以最近一级的祖先元素为参考移动位置

3.绝对定位不再占有原来的位置（脱离标准流）

6.固定定位fixed(重要)

固定元素于浏览器可视区的位置

特点：

1.以浏览器的可视窗口为参照点移动元素

a.跟父元素没有任何关系

b.不随滚动条滚动

2.固定定位不再占有原先的位置

固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位

小技巧：固定在版心右侧位置

小算法：右移50%+版心一般距离

7.粘性定位sticky

可以被认为是相对定位和固定定位的混合

特点：

1.以浏览器的可视窗口为参照点移动元素

2.粘性定位占有原先的位置

3.必须添加其中一个，否则就是相对定位

8.总结

定位模式	是否脱标	移动位置
static静态	否	不能使用边偏移
relative相对	否	相对自身位置移动
absolute绝对	是 不占有位置	带定位的父级
fixed固定	是	浏览器可视区
sticky粘性	否	浏览器可视区

网页布局总结

1.标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局

2.浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

3.定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局

十六、元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但我们刷新页面，会重新出现

本质：让一个元素在页面中隐藏或者显示出来

1.display属性

用于设置一个元素应如何显示

display: none;隐藏对象
display: block;除了转换成块级元素之外，同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置

2.visibility可见性

用于指定一个元素应可见还是隐藏

visibility: visible；元素可视
​
visibility: hidden;元素隐藏
​

visibility隐藏元素后，继续占有原来的位置

3.overflow溢出

overflow属性指定了如果内容溢出一个元素的框（超过指定高度及宽度）时，会发生什么

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容与否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局

但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分

十七、css高级技巧

一、精灵图

1.1为什么需要精灵图

一个网页中往往应用很多小图像，当页面中的图像过多时，服务器就会频繁接收和发送请求图片，造成服务器请求压力过大，从而大大降低页面的 加载速度

因此，为了有效减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术

核心原理：将网页中一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

1.2精灵图的使用

核心：

1.精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中

2.这个大图片也称为sprites精灵图或者雪碧图

3.移动背景图片位置，此时可以使用background-position

4.移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同

5.因为一般情况下，都是往上往左移动，所以数值是负值

6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

代码：

.box {width: 60px;height: 60px;margin:100px auto;background: url(images/sprites.png) no-repeat;background-position: x y;(px)
}

总结：

1.精灵图主要针对小的背景图片的使用

2.主要借助于背景位置来实现：background-position；盒子不动，都是精灵图在移动

3.一般情况下精灵图都是负值（x轴右边走是正值，左边走负值；Y轴上移为正值，下移为负值）

二、字体图标

2.1字体图标的产生

使用场景：主要用于显示网页中通用的常用的一些小图标

精灵图有诸多优点，但缺点很明显：

1.图片文件还是比较大的

2.图片本身放大和缩小会失真

3.一旦图片制作完毕想要更换非常复杂

此时，有一种技术的出现很好地解决了以上问题，就是字体图标iconfont

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质是字体

2.2字体图标的优点

1.轻量：一个图标字体要比一系列的图像要小，一旦字体加载了，图标会马上渲染出来，减少服务器请求

2.灵活：本质其实是文字，可以很随意地改变颜色、产生阴影、透明效果、旋转等

3.兼容：几乎支持所有的浏览器，请放心使用

注意：字体图标不能代替精灵技术，只是对工作中图标的部分技术进行提升和优化

总结：

1.遇到一些结构和样式简单的小图标就用字体图标

2.遇到一些结构和样式复杂一点的小图片就用精灵图

2.3字体图标的下载和使用

1.下载

2.引入html页面

3.字体图标的追加（以后添加新的小图标）

下载网站：

icomoon

阿里iconfont字库

引入

在css样式中全局声明字体，简单理解把这些字体文件通过css引入到我们页面中

一定注意字体文件路径的问题

@font-face {font-family:'icomoon';src: url('')font-weight: normal;font-style:normal;
}

三、CSS用户界面样式

3.1什么是界面样式

就是更改一些用户操作样式，以便提高更好的用户体验

1.更改用户的鼠标样式

2.表单轮廓

3.防止表单域拖拽

3.2鼠标样式cursor

li {cursor: pointer; }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

3.3轮廓线 outline

给表单添加outline:0;或者outline:none;样式之后，就可以去掉默认的蓝色边框

3.4防止拖拽表单域

resize:none;

四、vertical-align属性应用

使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐

用于设置一个元素的垂直对齐方式，但只针对行内元素和行内块元素有效

语法：

vertical-align: baseline | top | middle | bottom;

值	描述
baseline	默认，元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
bottom	把元素的顶端与行中最低元素的顶端对齐
middle	把此元素放置在父元素的中部

4.2解决图片底部默认空白缝隙问题

bug：图片底会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

主要解决方法有两种：

1.给图片添加vertical-align:middle | top |bottom等

2.把图片转换为块级元素display:block;

五、溢出的文字省略号显示

1.单行文本溢出显示省略号--必须满足三个条件

1.先强制一行内显示文本
white-space: nowrap;(默认normal自动换行)
2.超出的部分隐藏
overflow:hidden;
3.文字用省略号替代超出的部分
text-overflow:ellipsis;

2.多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，适合于webkit浏览器或者移动端

overflow: hidden;
text-overflow: ellipsis;
弹性伸缩盒子模型显示
display: -webkit-box;
限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;
设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;

六、常见布局技巧

巧妙利用一个技术更快更好地布局

1.margin负值的运用

浮动时两个盒子紧紧相依，1px的边会变成2px，这时候运用margin: -1px;就能让盒子互相盖住

就会变回一个像素的状况

1.让每个盒子margin往左侧移动-1px正好压住相邻盒子边框

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位，如果有定位，则加z-index)

3.因为相对定位既不脱标，默认的权重又高于标准流，所以边框能显示

4.如果盒子都有相对定位，就直接提高特定的权重就可以了

ul li:hover {
//如果li都有定位，则利用z-index提高层级z-index: 1;border: 1px solid blue;
}
ul li:hover {
//如果盒子没有定位，则鼠标经过添加相对定位即可position: relative;border: 1px solid blue;
}

2.文字围绕浮动元素

文字会自动围绕浮动元素,不需要左右各写一个浮动

代码：

* {margin: 0;padding: 0;
}
.box {width: 300px;height: 70px;background-color: pink;margin: 0 auto;padding: 5px;
}
.pic {float: left;width: 120px;height: 60px;margin-right: 5px;
}
.pic img {width: 100%;
}

3.行内块的巧妙运用

利用行内块并列之间有缝隙

代码

.box a {display: inline-block;width: 36px;height: 36px;background-color:white;border: 1px solid white;text-align: center;line-height: 36px;text-decoration: none;color: black;font-size: 14px;
}
.box .prev,
.box .next{width: 85px;
}

4.css三角强化

.box {width: 0;height: 0;//把上边框宽度调大border-top:100px solid transparent;border-right: 50px solid skyblue;//左边和下边边框宽度设置为0border-bottom: 0 solid blue;border-left: 0 solid green;
}

七、CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，增强兼容性，我们需要对CSS初始化

简单理解：css初始化，是指重设浏览器的样式

每个网页都必须首先进行CSS初始化

Unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样可以有效避免浏览器解释CSS代码时候出现乱码的问题

比如：

黑体 \9ED1\4F53

宋体 \5B8B\4F53

微软雅黑 \5FAE\8F6F\96C5\9ED1

十八、HTML5、CSS新特性

一、html5

1.1新增语义化标签

标签	语义
<header>	头部标签
<nav>	导航标签
<article>	内容标签
<section>	定义文档某个区域
<aside>	侧边栏标签
<footer>	尾部标签

注意：

1.这种语义化标准主要是针对搜索引擎的

2.这些新标签页面中可以使用多次

3.在IE9中，需要把这些元素转换为块级元素

4.移动端更喜欢用这些标签

1.2新增多媒体标签

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件

1.<audio>音频（mp3)

<audio src="文件地址" controls="controls"></audio>

​

​

2.<video>视频 (mp4)

<video src="文件地址" controls="controls"></video>
<video controls="controls" width="300"><source src="move.ogg" type="video/ogg"><source src="move.mp4" type="video/mp4">您的浏览器暂不支持<video>标签播放视频
</video>

常见属性：

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题
controls	controls	向用户显示播放控件
width	px	设置播放器宽度
height	px	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto(预先加载视频) none(不应加载视频)	规定是否预加载视频(如果有了autoplay 就忽略该属性)
src	url	视频url地址
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

总结

1.音频标签和视频标签使用方式基本一致

2.浏览器支持情况不同

3.谷歌浏览器把音频和视频自动播放禁止了

4.我们可以给视频标签添加muted属性来静音播放视频，音频不可以

1.3 新增input属性

属性值	说明
type="email"	限制用户输入必须为Email 类型
type="url"	限制用户输入必须为url 类型
type="date"	限制用户输入必须为日期 类型
type="time"	限制用户输入必须为时间 类型
type="month"	限制用户输入必须为月 类型
type="week"	限制用户输入必须为周 类型
type="number"	限制用户输入必须为数字 类型
type="tel"	手机号码
type="search"	搜索框
type="color"	生成一个颜色选择表单

1.4新增表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项 默认已经打开，如autocomplete="on",关闭autocomplete="off"需要放在表单内，同时加上name属性，同时成功提交
multiple	multiple	可以多选文件提交

二、CSS3的新特性

2.2属性选择器

属性选择器可以根据元素特定属性的来选择元素，这样就可以不用借助类或者id选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att属性且属性值等于val的E元素
E[att^="val"]	匹配具有att属性且值以val开头的E元素
E[att$="val"]	匹配具有att属性且值以val结尾的E元素
E[att*="val"]	匹配具有att属性且值中含有val的E元素

2.3结构伪类选择器

根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

选择符	简介
E:first-child	匹配父元素中的第一个子元素与类型E
E:last-child	匹配父元素中的最后一个子元素与类型E
E:nth-child(n)	匹配父元素中的第N个子元素与类型E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	制定类型E的第N个

nth-child(n)选择某个父元素的一个或多个特定的子元素

1.n可以是数字，关键字和公式

2.n如果是数字，就是选择第n个子元素，里面数字从1开始

3.n可以是关键字：even偶数，odd奇数

4.n可以是公式：常见的公式如下(如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略)

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15..
n+5	从第5个开始（包含第五个）到最后
-n+5	前5个（包含第五个）

区别：

1.nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配

2.nth-of-type 对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第N个孩子

2.4伪元素选择器(重点)

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

1.before和after创建一个元素，但是属于行内元素

2.新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

3.语法：element::before{}

4.before和after必须有content属性

5.before在父元素内容的前面创建元素，after在父元素内容的后面插入元素

6.伪元素选择器和标签选择器一样，权重为1

div::after {position: absolute;top: 10px;right: 10px;content: '\e91e';
}

隐藏遮罩层

.tudou::before {content: '';//隐藏遮罩层display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: tgba(0,0,0,.4) url() no-repeat center;
}
//当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来
.tudou:hover::before {display: block;
}

伪元素清除浮动

是额外标签法的一个升级和优化

.clearfix:after {content: "";   //伪元素必须写的属性display: block;//插入的元素必须是块级height: 0;      //不要看见这个元素clear: both;    //核心代码清除浮动visibility: hidden;//不要看见这个元素
}

.clearfix:before,.clearfix:after {content:"";display: table;
}
.clearfix:after {clear:both;
}

2.5CSS3盒子模型

css3中可以通过box-sizing指定盒子模型，有两个值，1.content-box 2.border-box,

这样我们计算盒子大小的方式就发生了变化

两种情况

1.box-sizing: content-box 盒子大小为 width +padding + border (以前默认的)

2.box-sizing:border-box 盒子大小为width

如果盒子模型我们改为box-sizing:border-box，那么padding和border就不会撑大盒子*（前提padding和border不会超过width宽度)

2.6CSS3其他特性

滤镜filter：

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

filter: 函数()； 例如：filter:blur(5px); blur模糊处理，数值越大越模糊

css3 calc函数

calc()此css函数让你在声明css属性值执行一些计算

width: calc(100% - 80px);

括号里面可以使用加减乘除来进行计算

注意：符号之间要由空格隔开

2.7css3 过渡

过渡是css3里颠覆性的特征之一，我们可以在不使用Flash动画或者js的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

过渡动画：是从一个状态 渐渐过渡到另外一个状态

可以让我们页面更好看，动感十足

经常与:hover搭配使用

transition:要过渡的属性 花费时间 运动曲线 何时开始

1.属性：想要变化的css属性，宽度高度背景颜色内外边距都可以，如果想要所有的属性都过渡，就写一个all

2.花费时间：单位是秒s，必须写单位

3.运动曲线：默认是ease(可以省略)

4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间，默认是0s(可以省略)

运动曲线：

值	描述
linear	动画从头到尾速度是相同的
ease	默认，动画以低速开始，然后加快，结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
cubic-bezier(n,n,n,n)	在括号里写上0-1的值

谁做过渡给谁加

div {width: 200px;height: 100px;background-color: pink;transition: width .5s ease 1s;
}
div:hover {width: 400px;
}

三、2D变换

3.3 移动translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

1.语法

transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);

2.重点：

1.定义2D转换中的移动，沿着X和Y轴移动元素

2.translate最大的优点：不会影响其他元素的位置

3.translate中的百分比单位是相对于自身元素的translate:(50%,50%);

4.对行内标签没有效果

3.3旋转rotate

2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转

1.语法

transform: rotate(度数)

2.重点

1.rotate里面跟度数，单位是deg rotate(45deg)

2.角度为正，顺时针；负，逆时针

3.默认旋转的中心点是元素的中心点

3.4转换中心点transform-origin

我们可以设置元素转换的中心点

1.语法

transform-origin: x y;

2.重点

1.注意后面的参数 x和y用空格隔开

2.x y默认转换的中心点是元素的中心点(50% 50%)

3.还可以给x y设置像素或者方位名词(top bottom left right center)

3.5缩放scale

放大或缩小，只要给元素添加上了这个属性就能控制它放大还是缩小

1.语法

transform:scale(x,y);

2.注意：

1.注意其中x和y用逗号分隔

2.transform:scale(1,1)宽和高都放大一倍，相当于没放大

3.transform:scale(2)只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)

4.transform:scale(0.5,0.5)缩小

5.scale缩放最大优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不会影响其他盒子

四、动画

4.1动画的基本使用

分两步：

1.先定义动画

2.再使用（调用）动画

1.使用keyframes定义动画(类似定义类选择器)

@keyframes 动画名称 {0% {width:100px;}25% {width:150px;}100% {width:200px;}
}

2.元素使用动画

div {width: 200px;height: 200px;background-color: aqua;margin: 100px auto;//调用动画animation-name:动画名称//持续时间animation-duration:持续时间
}

4.2动画常用属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称（必须）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认0（必须）
animation-timing-function	规定动画的速度曲线，默认是ease
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite代表循环
animation-direction	规定动画是否在下一周期逆向播放，默认是"normal",alternate逆播放
animation-play-state	规定动画是否正在运行或者暂停，默认是"running"还有"pause"
animation-fill-mode	规定动画结束后状态，保持forwards；回到起始backwards

简写：

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

1.简写属性不包括animation-play-state

2.暂停动画animation-play-state:paused;经常和鼠标经过等其他配合使用

3.想要动画走回来而不是直接跳回来，animation-direction: alternate;

4.盒子动画结束后，停在结束位置：animation-fill-mode: forwards

4.3速度曲线细节

animation-timing-function

值	描述
linear	动画从头到尾速度是相同的
ease	默认，动画以低速开始，然后加快，结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	规定了时间函数中的间隔数量（步长）