css基本语法小结

一、伪类

专门用来表示元素的一种特殊的状态
比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框,当我需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
input:focus{}

1.a的伪类：

涉及到a的伪类一共有四个：
	:link
	:visited
	:hover
	:active
而这四个选择器的优先级是一样的

2.否定伪类：

作用：可以从已选中的元素中剔除某些元素
	语法：
	:not(选择器)

3.伪元素：

作用：使用伪元素来表示元素中的一些特殊的位置
	:first-letter
	:first-line
	:before表示元素最前边的部分
	:after表示元素的最后边的部分
	一般before都需要结合content这个样式一起使用
	通过content可以向before或after的位置添加一些内容

二、选择器

1.属性选择器：

作用：可以根据元素中的属性或属性值来选择指定元素

语法：
	[属性名]选取含有指定属性的元素
	[属性名="属性值"]选取含有指定属性的元素
	[属性名^="属性值"]选取属性值以指定元素开头的元素
	[属性名$="属性值"]选取属性值以指定元素结尾的元素
	[属性名*="属性值"]选取属性值包含指定元素的元素
title属性，这个属性可以给任何标签指定,当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示

2.子元素选择器：

	：nth-child可以选中任意位置的子元素,该选择器后边可以指定一个参数，指定要选中第几个子元素
		even表示偶数位置的子元素
		odd表示基数位置的子元素
	:first-of-type
	:last-of-type
	:nth-of-type 
		和first-child这些非常的类似,只不过child，是在所有的子元素中排列,而type，是在当前类型的子元素中排列

3.兄弟元素选择器：

后一个兄弟选择器
	作用：可以选中一个元素后紧挨着的指定的兄弟元素
	语法：前一个+后一个
选中后边的所有兄弟
	语法：前一个~后边所有

三、样式的继承：

像儿子可以继承父亲的遗产一样，在css中，祖先元素的样式，也会被他的后代元素所继承，利用继承，可以将一些基本的样式设置给祖先元素，这样所有的元素将会自动继承这些样式。但是并不是所有样式都会被子元素所继承，比如:背景相关的样式不会被继承 边框相关的样式 定位相关的样式都不会被继承

四、选择器的优先级：

当使用不同选择器，选中同一个元素并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定,优先级高的优先显示。

优先级的规则
	内联样式，优先级1000
	id选择器，优先级100
	类和伪类，优先级10
	元素选择器，优先级1
	通配选择器，优先级0
	继承的样式，没有优先级

选择器中包含多种选择器时，需要将多种选择器的优先级相加然后比较,但是注意，选择器的优先级计算，不会超过他的最大的数量级 ,如果选择器的优先级一样，则选择靠后的选择器 ,并集选择器的优先级是单独计算.
div, p ,#p1, .hello{}
可以在样式的最后，添加一个!important,则此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important.

五、文本标签：

1.em和strong

 这两个标签都表示一个强调的内容，
    em主要表示语气上的强调,em在浏览器中默认使用斜体显示
    strong表示强调的内容，比em更强烈，默认使用粗体显示
	i标签中的内容会以斜体显示
	b标签中的内容会以加粗显示
 h5规范中规定，对于不需要着重的内容而是单纯的加粗或斜体，就可以使用b和i标签

2.small

small标签中的内容会比他的父元素中的文字要小一些,在h5中使用small标签中来表示一些细则一类的内容,比如：合同中小字，网站的版权声明都可以放到small,网页中所有加书名号的内容都可以用cite标签，表示参考的内容,比如：书名 歌名 话剧名 电影名.

3.q/bloackquote

q标签表示一个短的引用（行内引用,q标签引用的内容，浏览器会默认加上引号.
lockquote标签表示一个长引用（块级引用）

4.sup/sub

使用sup标签来设置一个上标
sub标签用来表示一个下标

5.del/ins

使用del标签表示一个删除的内容
    del标签中的内容，会自动添加删除线
ins表示一个插入的内容
    ins中的内容，会自动添加下划线

6.pre/code

需要在页面中直接编写一些代码
   pre标签是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
   code专门用来表示代码
我们一般结合使用pre和code来表示一段代码

六、列表标签：

在HTML可以创建清单，在网页中一共由三种列表：

	1.无序列表
		 -使用ul标签来创建一个无序列表
		 -使用li在ul中创建一个一个的列表项,一个li就是一个列表项
		 通过type属性可以修改无序列表的项目符号
		 可选值：
		     disc.默认值，实心的圆点
		     square.实心的方块
		     circle.实心的圆
		 注意：默认的项目符号我们一般都不使用！如果需要设置项目符号，就可以采用li设置背景图片的方式来设置
		 ul和li都是块元素
	2.有序列表
		有序列表和无序列表类似，只不过用ol来代替ul,有序列表使用有序的序号作为项目符号
		type属性，可以指定序号的类型
		 可选值:
			1     默认值，使用阿拉伯数字
		    a/A   采用小写或大写字母作为序号
		    i/I   采用小写或大写的罗马数字作为序号
		ol也是块元素
		列表之间都是可以互相嵌套的，可以在无序列表中放入有序列表,也可以在有序列表中放一个无序列表
	3.定义列表
		定义列表用来对一些词汇或内容进行定义,使用dl来创建一个定义列表
		     dl中有两个子标签
		         dt ：被定义的内容
		         dd ：对定义内容的描述
		同样dl和ul和ol之间都可以互相嵌套

七、长度单位：

像素px:一个像素就相当于我们屏幕中的一个小点，不同的显示器一个像素的大小不相同,显示效果越好越清晰，像素就越小，反之像素越大;
百分比 %:使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生变化,在我们创建一个自适应的页面时，经常使用百分比作为单位;
em: 使用em时，当字体大小发生变化时，em也会随之改变,当设置字体相关的样式时，经常会使用em
1em=1font-size

八、颜色单位：

在css可以直接用颜色单词来表示不同的颜色,也可以使用RGB值来表示不同的颜色,所谓的RGB值指的是通过red green blue三元色，通过这三种颜色的不同的浓度，来表示不同的颜色,颜色的浓度需要一个0~255之间的值，255表示最大，0表示没有
颜色浓度也可以采用百分数来设置，需要一个0%~100%之间的数字,也可以使用16进制的RGB值来表示颜色，原理和上边RGB原理一样，只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色,每组表示一个颜色，
第一组表示红色的浓度，范围00~ff；
第二组表示绿色的浓度，范围00~ff；
第三组表示蓝色的浓度，范围是00~fff;

九、字体的样式：

设置文字的大小,浏览器中一般默认的文字大小都是16px,font-size设置的并不是文字本身的大小,在页面中，每个文字都处在一个看不见的框中的,我们设置的font-size实际上是设置格的高度，并不是字体的大小,一般情况下文字都要比这个格要小一些，也有时比格大,根据字体的不同，显示效果也不同,通过font-family可以指定文字的字体，该样式可以同时指定多个字体，多个字体之间使用’,'分开，当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有再尝试下一个.

1.字体的分类：

在网页中，将字体分成5大类：

	serif（衬线字体）
	sans-serif（非衬线字体）
	monospace（等宽字体）
	cursive（草书字体）
	fantasy（虚幻字体）

可以将字体设置为这些大的分类，当设置为大的分类后，浏览器会自动选择指定的字体并应用样式，一般会将字体的大分类，指定为font-family的最后一个字体.

1.1.字体的其他样式：

font-style可以用来设置文字的斜体
  可选值：
	normal，默认值，文字正常显示
	italic，文字会以斜体显示
	oblique，文字会以倾斜的效果显示
	大部分浏览器都不会对倾斜和斜体作区分，也就是我们设置italic和oblique它们的效果往往是一样的，一般我们只会使用italic
font-weight也可以用来设置文本的加粗效果
  可选值：
	normal,默认值，文字正常显示
	bold文字加粗显示
font-variant可以用来设置小型大写字母
  可选值：
	normal，默认值，文字正常显示
	small-caps，文本以小型大写字母显示
	小型大写字母：
	    将所有的字母都以大写形式显示，但是小写字母的大小要比大写字母的大小要小一些

在css中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关的所有样式，可以将字体的样式的值，统一写在font样式中，不同的值之间用空格隔开，使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式，实际上使用简写属性也会有一个比较好的性能.

1.2.行间距：

行间距=行高-字体大小
通过设置line-height可以间接的设置行高，对于单行文本，可以将行高设置为和父元素的高度一致，这样可以使单行文本在父元素中垂直居中;
在font中也可以指定行高,在字体大小后可以添加’/行高’，来指定行高，该值是可选的，如果不指定则会使用默认值

1.3文本样式：

text-transform可以用来设置文本的大小写
    可选值:
	none		默认值，该怎么显示就怎么显示，不做任何处理
	capitalize  单词的首字母大写，通过空格来识别单词
	uppercase   所有字母都大写
	lowercase   所有字母都小写
text-decoration可以用来设置文本的修饰
    可选值：
	none 		 默认值，不添加任何修饰，正常显示
	underline    为文本添加下划线
	overline     为文本添加上划线
	line-through 为文本添加删除线
	超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline，如果需要去除超链接的下划线则需要将该样式设置为none
letter-spacing可以指定字符间距
word-spacing可以设置单词之间的距离,实际上就是词与词之间空格的大小
text-align用于设置文本的对齐方式
   可选值：
	left		默认值，文本靠左对齐
	right		文本靠右对齐
	center		文本居中对齐
	justify		两端对齐
	通过调整文本之间的空格的大小，来达到一个两端对齐的目的	
text-indent:用来设置首行缩进
   当给他指定一个正值时，会自动向右侧缩进指定的像素，如果为他指定一个负值，则会向左侧缩进指定的像素，通过这种方式可以将一些不想显示的文字隐藏起来，这个一般都会使用em作为单位	.

十、盒模型：

width和height只是设置的盒子内容区的大小，而不是盒子的整个大小,盒子可见框的大小由内容区、内边距和边框共同决定 .

1.边框

要为一个元素设置边框必须指定三个样式:

	border-width:边框的宽度
	   如果在border-width中指定了四个值，则四个值会分别设置给上 右 下 左按照顺时针的方向设置的
	   如果指定3个值，则三个值会分别设置给上 左右 下
	   如果指定两个值，这两个值会分别设置给上下  左右
	   如果指定一个值，则四边全都是该值
	除了border-width，css中还提供了border-xxxwidth
		xxx的值可能是top right bottom left
		专门用来设置指定边的宽度
	border-color：边框的颜色
	    同上     
	border-style:设置边框的样式
	   可选值：
		none:默认值，没有边框
		solid：实线
		dotted：点状
		dashed：虚线
		double:双线
	style也可以分别指定四个边框样式，规则和width一致，同时他也提供border-xxx-style四个样式，来分别设置四个边
    border:
   边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色而且没有任何的顺序要求，border一指定就是同时指定四个边不能分别指定
   border-top border-right border-bottom border-left，可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效.

2.内边距（padding）：

指的是盒子的内容区与盒子边框之间的距离，一共有四个方向的内边距，可以通过：padding-top、padding-right、padding-left、padding-bottom，来设置四个方向的内边距。内边距会影响盒子的可见框的大小，元素的背景颜色会延伸到内边距。

盒子可见的宽度=border-left-width + paddding-left + width + padding-right+ border-right-width
可见框的高度=border-top-width +padding-top+ height+ padding-bottom+ border-bottom-width
使用padding可以同时设置四个边框的样式，规则和border-width一致

3.外边距（margin）:

外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响盒子的位置：

	盒子有四个方向的外边距
		margin-top
		margin-right
		margin-bottom
		margin-left

由于页面中的 元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距时会改变其他盒子的位置，margin也可以指定为一个负值，如果外边距设置的负值，则元素会向反方向移动，margin还可以设置为auto，auto一般只设置给水平方向的margin，如果只指定左外边距或右外边距的margin为auto则会将外边距设置为最大值，垂直方向外边距如果设置为auto，则外边距默认就是0； 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto,以使子元素在父元素中水平居中， 外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,规则和padding一样。浏览器为了在页面没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的，所以我们往往在编写样式之间需要将浏览器中的默认的margin和padding统统去掉
margin:0;padding:0;

4.垂直外边距的重叠：

在网页中相邻的垂直方向的外边距会发生外边距的重叠，所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是求和，如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。

5.内联元素的盒模型：

内联元素不能设置width和height，内联元素不支持垂直外边距，内联元素支持水平方向的外边距，水平方向的相邻外边距不会重叠，而是求和，内联元素可以设置内边距，边框，但是不影响垂直方向页面的布局。

6.盒模型新增样式：

box-shadow:inset 10px 10px 10px 20px black,10px 10px 10px 20px deeppink;
resize:both

十一、display&visibility:

display：修改元素的类型
   可选值：
	inline：可以将一个元素作为内联元素显示
	block：可以将一个元素设置为一个块元素显示
	inline-block:可以将一个元素转换为行内块元素
	      可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行；
	none：不显示元素，并且元素不会在页面中继续占有位置
visibility:可以用来设置元素的隐藏和显示的状态
   可选值：
	visible默认值，元素默认会在页面显示
	hidden 元素会隐藏不显示

使用visibility：hidden；隐藏的元素不会在页面显示，但是他的位置会依然保持； display:none;使用该方式隐藏的元素，不会在页面中显示，并且不会站据页面的位置。

十二、overflow:

子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小，如果子元素的大小超出了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容，父元素默认是将溢出内容，在父元素外边显示，通过overflow可以设置父元素如何处理溢出的内容：

	  可选值：
		visible：默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
		hidden：溢出的内容，会被修剪，不会显示
		scroll：会为父元素添加滚动条，通过拖动滚动条可以查看完整内容
			    该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
		auto：会根据需求自动添加滚动条，
				需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加

十三、文档流:

文档流处在网页的最底层，他表示的是一个网页中的位置，我们所创建的元素默认都处在文档流中，元素在文档流中的特点：

1. 块元素
   1.1.块元素在文档流中会独占一行，块元素会自上向下排列
   1.2.块元素在文档流中默认宽度是父元素的100%
   1.3. 块元素在文档流中的高度默认被内容撑开
2. 内联元素
   2.1. 内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右
   2.2. 在文档流中，内联元素的宽度和高度默认都被内容撑开，当元素的宽度为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距

十四、浮动：

块元素在文档流中默认垂直排列，所以div会自上至下依次排列，如果希望块元素在页面中水平排列，可以使块元素脱离文档流：

使用float来使元素浮动，从而脱离文档流
	  可选值：
		none，默认值，元素默认在文档流中的排列
		left，元素会立即脱离文档流，向页面的左侧浮动
		right，元素会立即脱离文档流，向页面的右侧浮动

当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，他下边的元素会立即向上移动，元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到父元素的边框或者其他浮动元素，如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过上边的块元素，浮动的元素不会超过他上边的兄弟元素，最多最多一边齐，浮动的元素不会盖住文字，文字会自动环绕在元素的周围，所以我们可以通过浮动来设置一个文字环绕图片的效果，在文档流中，子元素的宽度默认占父元素的全部。当元素设置浮动后，会完全脱离文档流，块元素脱离文档流后，高度和宽度都被内容撑开，开启内联元素的浮动，内联元素脱离文档流以后会变成块元素。

十五、高度塌陷问题：

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高，但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致一个父元素的高度塌陷，由于父元素的高度塌陷了，则父元素下所有元素都会向上移动，这样将会导致页面布局混乱， 所以在开发中一定要避免出现高度塌陷的问题。我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的

1.高度塌陷问题解决方法之一（开启BFC）：

根据w3c的标准，在页面中都有一个隐含的属性叫做block formatting context，简称BFC（块级格式化属性），该属性可以设置打开或者关闭，默认是关闭的，当开启元素的BFC以后，元素将会具有如下的特性：

1. 父元素的垂直外边距不会和子元素重叠
2. 开启BFC的元素不会被浮动元素所覆盖
3. 开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC：

1. 设置元素浮动：

   使用这种元素开启，自然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下面的元素上移，不能解决问题

2. 设置元素绝对定位

3. 设置元素为inline-block

   可以解决问题，但是会导致宽度丢失，不推荐使用这种方式

4. 将元素的overflow设置为一个非visible的值

   推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。但是在ie6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容ie6，在ie6中，虽然没有BFC，但是有另一个隐含的属性叫做haslayout,该属性的作用和BFC类似，所以在ie6浏览器中可以通过开haslayout来解决问题，在ie6中，如果为元素指定了一个宽度，则会默认开启haslayout，开启方式很多，我们直接使用一种副作用最小的，直接将元素的zoom设置为1即可：zoom类似放大的意思，后边跟着一个数值，写几就将元素放大几倍，zoom:1表示不放大，但是通过该方式可以开启haslayout；zoom这个样式，只在ie中支持，其他浏览器都不支持（具体规则使用时查询文档）。

十六、圆角：border-radius:100px/150px;

十七、 边框图片：

border-image-source:url(./img/avatar.ong);
    border-image-slice:100% fill;
    border-image-repeat:round;
    border-image-width:10px;
    border-image-outset:20px;

十八、css2背景相关：

background-color: pink;
    background:url(../img/avatar.png), url(../img/cover.png);
    background-repeat: repeat-x;
    background-position:center;
    background-attachment: scroll;

十九、css3背景相关：

background-color: pink;
    background:url(../img/cover.png);
    background-origin: padding-box;
    background-clip: content-box;

二十、渐变：

线性渐变：
    background-image: linear-gradient(90deg,red 10%,yellow 30% ,pink 40%);
    background-image: repeating-linear-gradient(90deg,rgba(0,0,0,1), rgba(123,234,189,1));
径向渐变：
    background-image: radial-gradient(circle,red 10%,yellow);

二十一、过渡（transition）：

通过过渡可以指定一个属性发生变化时的切换方式，通过过渡可以创建一个非常好的效果，提升用户的体验

transition-property:指定要执行的过渡的属性
        多个属性之间用逗号隔开，如果所有属性都需要过渡，则使用all关键字，大部分属性都支持过渡效果,
        注意：过渡时必须是从一个有效数值向另一个有效数值过渡
transition-duration:指定过渡效果的持续时间（必须加单位）
            时间单位：s和 ms 1s=1000ms
transition-timing-function:过渡的时序函数，指定过渡的执行的方式：
        可选值：
            ease 默认值，慢速开始，先加速，再减速
            linear 匀速运动
            ease-in 加速运动
            ease-out减速运动
            ease-in-out 先加速，后减速
            cubic-bezier()来指定时序函数
                https://cubic-bezier.com
            steps()分步执行过渡效果
               可以设置一个第二个值
                   end， 在时间结束时执行过渡（默认值）
                   start，在时间开始时执行过渡 
transition-delay: 表示过渡效果的延迟,等待一段时间后再执行过渡
transition:可以同时设置过渡相关的所有属性，只有一个要求，
			如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间

二十二、2D变形：变形是指通过css来改变元素的形状或位置

变形不会影响到页面的布局

transform-origin：变形的原点
     默认值 center
transform：用来设置元素的变形效果
 旋转：通过旋转可以使元素随着x y z 轴旋转指定的角度 
       rotateX()
       rotateY()
       rotateZ() 
backface-visibility:visible/hidden：设置元素背面是否显示
 平移： 平移元素，百分比是相对于自身计算的
       translateX()沿着X轴方向平移
       translateY()沿着Y轴方向平移
       translateZ()沿着Z轴方向平移
	Z轴平移，调整元素在Z轴的位置，正常情况下就是调整元素和人眼之间的距离，
	距离越大，元素离人越近，Z轴平移属于立体效果(近大远小)，默认情况下网页不支持透视，
	如果需要看见这个效果，必须设置网页的视距，设置当前网页的视距为800像素，
perspective:800px;    人眼距离网页的距离       
 斜切： transform:skew(45deg，45deg);
 缩放：对元素进行缩放的函数
       scaleX()水平方向缩放
       scaleY()垂直方向缩放
       scaleZ()
       scale()双方向缩放

二十三、动画(animation)

动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果，设置动画效果必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤：

@keyframes test {
        /* from表示动画的开始位置  也可以使用0%*/
        from{
            margin-left:0;
            background-color: orange;
        }
        /* to动画的结束位置 也可以使用100%*/
        to{
            margin-left:700px;
            background-color: red;
        } 
     }
animation-name：要对当前元素生效的关键帧的名字 
animation-duration:动画的执行时间 
animation-delay:设置动画的延时
animation-timing-function:设置动画的时序函数
animation-iteration-count:动画执行的次数 
    可选值：
         次数
         infinite 无限执行
animation-direction:指定动画运行的方向
	可选值
         normal ：默认值，从from向to运行  每次都是这样
         reverse：从to到from运行，每次都是这样
         alternate：从from到to 重复执行动画时 返向执行
         alternate-reverse：从to到from运行 重复执行时反向执行
animation-play-state:设置动画的执行状态
	可选值：
         running 默认值 动画执行
         paused 动画暂停
animation-fill-mode:动画的填充模式 
	可选值：
         none 默认值 动画执行完毕元素回到原来位置
         forwards 动画执行完毕元素会停在动画结束的位置
         backwads 动画延迟等待时，元素会处于开始位置
         both 结合了forwards和backwards
 animation:test 2s infinite 1s alternate;

二十三、表单：

    autocomplete="off"关闭自动补全
    readonly将表单项设置为只读，数据会提交
    disabled将表单项设置为禁用，数据不会提交
    autofocus设置表单项获取焦点
新增：type='color'/'email'等

二十四、图标字体（iconfont）：

在网页中经常需要使用一些图标，可以通过图片来引入图标， 但是图片大小本身比较大，并且非常的不灵活，所以在使用图标时，我们还可以直接将图标设置为字体，然后通过font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标，fontawesome使用步骤：

1. 下载

2. 解压

3. 将css和webfont移入到项目中

4. 将all.css引入到网页中

5. 使用图标字体

   5.1. 直接通过类名来使用图标字体

         class="fas fa-bell"
         class="fab fa-accessible-icon"
   

   5.2. 通过伪元素来设置图标字体

           1.找到要设置图标的元素通过before或after选中
           2.在content中设置字体的编码
           3.设置字体的样式
               font-family:"Font Awesome S Brand";
               font-family:"Font Awesome S Free";
               font-weight:900;
   

   5.3. 通过实体来使用图标字体

           &#x图标的编码；