CSS

一、引用方式

<style>
	内部样式表
</style>
你也可以在不同的媒体上使用不同的样式文件：
<link rel="stylesheet" media="mediatype and|not|only(expressions)" href="print.css">
<! -- 引入一个外部样式表-->
<link rel="stylesheet" type="text/css" href=" ../css/style.css"/>
上面两个都是在head里面

<! -- 内联属性--> 
 <div style="font-size:16px;"></div>

内联属性优先级最高，但是内部样式表和外部样式的优先级由它的代码行号决定
行号越大优先级越高

二、标签选择器

.intro					选择所有class="intro"的元素
#firstname				选择所有id="firstname"的元素
*					    选择所有元素(通配符)
p						选择所有<p>元素
div,p					选择所有<div>元素和<p>元素
div p					选择<div>元素内的所有<p>元素
div>p					选择所有父级是<div>元素的<p>元素
div+p					选择所有紧接着<div>元素之后的<p>元素(兄弟元素)
[target]				选择所有带有target属性元素
[target=_blank]			选择所有使用target="_blank"的元素
[title~=flower]			选择标题属性包含单词"flower"的所有元素
[langl|=en]				选择lang 属性以en为开头的所有元素
p~ul					选择p元素之后的每一个ul元素
a[src^="https"]			选择每一个src属性的值以"https"开头的元素
a[src$=".pdf"]			选择每一个src属性的值以".pdf"结尾的元素
a[src*="runoob"]		选择每一个src属性的值包含子字符串"runoob"的元素
:root					选择文档的根元素

三、伪类\伪元素

菜鸟伪类/伪元素教程

伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。

伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。例如，我们可以通过:before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见这些文本，但是它实际上并不在DOM文档中。

input:checked	-选择所有选中的表单元素
input:disabled	-选择所有禁用的表单元素
p:empty   		-选择所有没有子元素的p元素
input:enabled	-选择所有启用的表单元素
p:first-of-type		-选择的每个p元素是其父元素的第一个p元素
input:in-range		-选择元素指定范围内的值
input:invalid		-选择所有无效的元素
p:last-child		-选择所有p元素的最后一个子元素
p:last-of-type		-选择每个p元素是其母元素的最后一个p元素
:not(p)				-选择所有p以外的元素
p:nth-child(2)		-选择所有p元素的父元素的第二个子元素
p:nth-last-child(2)		-选择所有p元素倒数的第二个子元素
p:nth-last-of-type(2)	-选择所有p元素倒数的第二个为p的子元素
p:nth-of-type(2)	-选择所有p元素第二个为p的子元素
p:only-of-type		-选择所有仅有一个子元素为p的元素
p:only-child		-选择所有仅有一个子元素的p元素
input:optional		-选择没有"required"的元素属性
input:out-of-range	-选择指定范围以外的值的元素属性
input:read-only		-选择只读属性的元素属性
input:read-write	-选择没有只读属性的元素属性
input:required		-选择有"required"属性指定的元素属性
root			   -选择文档的根元素
#news:target	-选择当前活动#news元素(点击URL包含锚的名字)
input:valid		-选择所有有效值的属性
a:link		-选择所有未访问链接
a:visited	-选择所有访问过的链接
a:active	-选择正在活动链接
a.:hover	-把鼠标放在链接上的状态
input:focus		-选择元素输入后具有焦点
p:first-letter	-选择每个<p>元素的第一个字母
p:first-line	-选择每个<P>元素的第一行
p:first-child	-选择器匹配属于任意元素的第一个子元素的<p>元素
p:before		-在每个<p>元素之前插入内容
p:after			-在每个<p>元素之后插入内容
p:lang(it)		-为<p>元素的lang属性选择一个开始值

关键字：
odd 奇数
even 双数

公式：
(an+ b).描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。
在这里，我们对所有索引是3的倍数的p元素指定了背景颜色：
p:nth-of-type(3n+0)
{
background:#ff0000;
}

四、css函数

函数									描述
attr()							  返回选择元素的属性值。
calc()							  允许计算CSS的属性值，比如动态计算长度值。
cubic-bezier()					   定义了一个贝塞尔曲线(Cubic Bezier)。
hsl()							  使用色相、饱和度、亮度来定义颜色。
hsla()							  使用色相、饱和度、亮度、透明度来定义颜色。
linear-gradient()				   创建—个线性渐变的图像
radial-gradient()				    用径向渐变创建图像。
repeating-linear-gradient()			用重复的线性渐变创建图像。
repeating-radial-gradient()			类似radial-gradient()，用重复的径向渐变创建图像。
rgb()							  使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。
rgba()							  使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。
var()							  用于插入自定义的属性值。

五、background

background-color:#b0c4de; 属性定义了元素的背景颜色.

background-image:url('paper.gif'); 属性描述了元素的背景图像.

background-repeat 图像平铺和不平铺 no-repeat;repeat-x;

background-position 属性改变图像在背景中的位置top bottom left right 可搭配使用

background-attachment  设置背景图像是否固定或者随着页面的其余部分滚动。
    值							描述
    scroll			背景图片随着页面的滚动而滚动，这是默认的。
    fixed			背景图片不会随着页面的滚动而滚动。
    local			背景图片会随着元素内容的滚动而滚动。
    initial			设置该属性的默认值
    inherit			指定 background-attachment的设置应该从父元素继承。


background:#ffffff url('img_tree.png') no-repeat right top;  
简写
当使用简写属性时，属性值的顺序为：
background-color
background-image
background-repeat
background-attachment
background-position

六、文本格式

text-align:center; 		文本的对齐方式：left right center 控制文本水平方向

文本的颜色:
color:#00ff00;
    值         			描述
    color_name			规定颜色值为颜色名称的颜色(比如red) .
    hex_number			规定颜色值为十六进制值的颜色(比如#ff0000).
    rgb_number			规定颜色值为rgb 代码的颜色(比如rgb(255,0,0)) .
    inherit				规定应该从父元素继承颜色。

text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration:none属性主要是用来删除链接的下划线

text-transform  文本转换属性是用来指定在一个文本中的大写和小写字母。uppercase全大写  lowercase全小写 capitalize单词首字母大写

text-indent:50px; 文本缩进属性是用来指定文本的第一行的缩进。

letter-spacing	字间距	normal默认规定字符间没有额外的空间，length定义字符间的固定空间，inherit规定应该从父元素继承 letter-spacing 属性的值。

text-shadow		基本文字阴影
    值					描述
    h-shadow		必需。水平阴影的位置。允许负值。
    v-shadow		必需。垂直阴影的位置。允许负值。
    blur			可选。模糊的距离。
    color			可选。阴影的颜色。

white-space			属性指定元素内的空白怎样处理。
    值					描述
    normal			默认。空白会被浏览器忽略。
    pre				空白会被浏览器保留。其行为方式类似HTML中的<pre>标签。
    nowrap			文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。
    pre-wrap		保留空白符序列，但是正常地进行换行。
    pre-line		合并空白符序列，但是保留换行符。
    inherit			规定应该从父元素继承 white-space 属性的值。

七、字体样式

文字大小：
font-size:20px;
px(像素)大小是我们网页最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认品示的字号大小不一致。我们尽量给一个明确值大小，不要默认大小
可以给body指定整个页面文字的大小
也可以使用rem单位，1rem=16px

字体设置：
font-family:"微软雅黑";
各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体: body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}


文字粗细：
font-weight:bold;
    属性值                 描述
    normal				默认值(不加粗的)
    bold                 定义粗体（加粗的)
    100-900              400等同于normal，而700等同于bold
    注意这个数字后面不跟单位


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

文字复合属性：
font:font-style font-weight font-size/line-height font-family;
使用 font属性时，必须按上面语法格式中的顺序书写。不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值)，但必须保留font-size和 font-family属性，否则 font 属性将不起作用

八、列表

list-style				简写属性。用于把所有用于列表的属性设置于一个声明中

list-style-image		将图像设置为列表项标志。

list-style-position		设置列表中列表项标志的位置。

list-style-type			设置列表项标志的类型。(none去除掉标签)

九、盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

无内容盒子宽度 = width + padding-left +padding-right + border-left+border-right;

九、css边框

属性				描述
border			简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为4个边分别设置颜色。

以上属性都可以添加left、right、top、bottom为单独边框设置样式，如border-left:

十、css轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

十一、css 外边距

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
margin简写的顺序：上右下左

十二、css内边距

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。
padding简写的顺序：上右下左

十三、css隐藏显示

隐藏元素 - display:none或visibility:hidden

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

十四、css块和内联元素

块级元素(block)特性：
    总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
    宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：
    和相邻的内联元素在同一行;
    宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的					top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

css改变元素属性
display:inline;内联元素
display:block;块元素
display:inline-box;内联块元素，表现为同行显示并可修改宽高内外边距等属性

十五、posttion定位（口诀，父相子绝）

static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位（脱离文档流）
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动

relative 定位
相对定位元素的定位是相对其正常位置。
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。

absolute 定位（脱离文档流）
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

sticky 定位（粘性布局）
基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序

十六、css Overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

值						描述
visible			默认值。内容不会被修剪，会呈现在元素框之外。
hidden			内容会被修剪，并且其余内容是不可见的。
scroll			内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto			如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit			规定应该从父元素继承 overflow 属性的值。

注意:overflow 属性只工作于指定高度的块元素上。

十七、float（浮动）

float:left|right;
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之前的元素将不会受到影响。


清除浮动
crear:both;
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。

十八、水平垂直对齐

元素居中对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配
注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

.center {
    margin: auto;
    width: 50%;
}

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
具有文本类属性的元素，text-align属性也可以使其水平居中显示。
具有文本类属性的元素有：行内元素、行内块元素。也就是说text-align属性也可以使这些元素水平居中。

图片居中对齐

img {
    display: block;
    margin: auto;
    width: 40%;
}

垂直居中 - 使用 line-height

line-height要实现垂直居中需要其数值与height的数值相等
.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

垂直居中 - 使用 position 和 transform

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    移动自身的 X轴-50%  Y轴的-50% 
}

十九、css透明

方式一：opacity: 0~1（文字和背景都影响）
0:全透明
1：不透明

方式二：rgba()设置颜色透明度（只有背景受到影响）
	RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。

方法三：background-color:transparent;

二十、css媒体查询

适配移动端

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

 width:可视区域的宽度，值可为数字或关键词device-width

height:同width

intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，

maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

user-scalable:是否可对页面进行缩放，no 禁止缩放

媒体查询

@media[mediatype][and|not|only]([mediafeature]){}

@media screen and (max-width:720px) and (min-width:320px){
      body{
          background-color:red;
    }
}
@media screen and (max-width:320px){
      body{
         background-color:blue;
       }
}

max-width        输出设备中页面最大可视区域宽度 小于这个width时，其中的css起作用
max-height      输出设备中页面最大可视区域高度 小于这个height时，其中的css起作用
min-width        输出设备中页面最小可视区域宽度 大于这个width时，其中的css起作用
min-height      输出设备中页面最小可视区域高度 大于这个height时，其中的css起作用
-webkit-min-device-pixel-ratio      设备上最小的物理像素和设备独立像素比，简称设备像素比（DPR ）

二十一、CSS3

一、边框

1、圆角

border-radius:25px;
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同
也有：
border-top-left-radius: 
border-top-right-radius: 
border-bottom-right-radius: 
border-bottom-left-radius: 

2、盒阴影

box-shadow: 10px 10px 5px #888888;
box-shadow: h-shadow v-shadow blur spread color inset;
值                              说明
h-shadow			必需的。水平阴影的位置。允许负值
v-shadow			必需的。垂直阴影的位置。允许负值
blur				可选。模糊距离
spread				可选。阴影的大小
color				可选。阴影的颜色
inset				可选。从外层的阴影（开始时)改变阴影内侧阴影

3、边界图片

border-image: source slice width outset repeat|initial|inherit;

值									描述
border-image-source			用于指定要用于绘制边框的图像的位置
border-image-slice				图像边界向内偏移
border-image-width				图像边界的宽度
border-image-outset		用于指定在边框外部绘制border-image-area的量
border-image-repeat		用于设置图像边界是否应重复(repeat) 、拉伸(stretch)或铺满（round)。

4、背景

background-image
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
background:url(img_flwr.gif);
background-size:80px 60px;
(常用background-size:100% 100%;)

background-origin 属性指定了背景图像的位置区域。

值			描述
padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

CSS3中background-clip背景剪裁属性是从指定位置开始绘制。

值						描述
border-box			默认值。背景绘制在边框方框内(剪切成边框方框)。
padding-box			背景绘制在衬距方框内(剪切成衬距方框)。
content-box			背景绘制在内容方框内(剪切成内容方框)。

5、CSS3 渐变（Gradients）

CSS3线性渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 

从上到下的线性渐变：
background-image: linear-gradient(#e66465, #9198e5);

从左到右的线性渐变：
background-image: linear-gradient(to right, red , yellow);

从左上角到右下角的线性渐变：
background-image: linear-gradient(to bottom right, red, yellow);

带有多个颜色节点的从上到下的线性渐变：
background-image: linear-gradient(red, yellow, green);
（可以再颜色后面加上百分比，决定该颜色区域占比）

从左到右的线性渐变，带有透明度：
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

repeating-linear-gradient() 函数用于重复线性渐变：
一个重复的线性渐变：
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

CSS3 径向渐变

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

颜色节点均匀分布的径向渐变：
background-image: radial-gradient(red, yellow, green);

颜色节点不均匀分布的径向渐变：
background-image: radial-gradient(red 5%, yellow 15%, green 60%);

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
形状为圆形的径向渐变：
background-image: radial-gradient(circle, red, yellow, green);

repeating-radial-gradient() 函数用于重复径向渐变：
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

6、CSS3 2D 转换

transform是在现有的元素上浏览器做的渲染，不会改变位置和大小

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
transform: translate(50px,100px);

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
transform: rotate(30deg);  元素顺时针旋转30度。

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
transform: scale(2,3); 
scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

skew(x,y) 方法	包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
transform: skew(30deg,20deg);
skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。

matrix() 方法
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);

7、CSS3 3D转换

transform 属性
rotateX()方法，围绕其在一个给定度数X轴为旋转中心轴的旋转的元素。
transform: rotateX(120deg);

rotateY()方法，围绕其在一个给定度数Y轴为旋转中心轴的旋转的元素。
transform: rotateY(130deg);

transform-style 属性规定被嵌套元素如何在 3D 空间中显示。	
    flat			表示所有子元素在2D平面呈现。（默认值）
    preserve-3d		表示所有子元素在3D空间中呈现。

perspective:;	属性规定 3D 元素的透视效果。
    number	元素距离视图的距离，以像素计。
    none	默认值。与0相同。不设置透视。

8、CSS3 过渡

transition: property duration timing-function delay;
property 规定应用过渡的 CSS 属性的名称
    值			描述
    none		没有属性会获得过渡效果。
    all			所有属性都将获得过渡效果。
    property	定义应用过渡效果的CSS属性名称列表，列表以逗号分隔。

duration 定义过渡效果花费的时间。默认是 0

timing-function	规定过渡效果的时间曲线。默认是 "ease"
    值					描述
    linear		规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
    ease		规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
    ease-in		规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
    ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
    ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
    cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

delay	规定过渡效果何时开始。默认是 0

transition应用于宽度属性的过渡效果，时长为 2 秒：
div{transition: width 2s;}
div:hover{width:300px;}

添加了宽度，高度和转换效果：
transition: width 2s, height 2s,transform 2s;

9、CSS3动画

animation动画属性
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

name 	动画名称
    值						说明
    keyframename		指定要绑定到选择器的关键帧的名称
    none				指定有没有动画(可用于覆盖从级联的动画)

duration	动画指定需要多少秒或毫秒完成

timing-function	设置动画将如何完成一个周期
	值											描述
    linear								动画从头到尾的速度是相同的。
    ease							默认。动画以低速开始，然后加快,在结束前变慢。
    ease-in										动画以低速开始。
    ease-out									动画以低速结束。
    ease-in-out									动画以低速开始和结束。
    cubic-bezier(n,n,n,n)				在cubic-bezier 函数中自己的值。可能的值是从0到1的数值。

delay 		设置动画在启动前的延迟间隔。

iteration-count 	定义动画的播放次数。
	值						描述
	n			一个数字，定义应该播放多少次动画
	infinite		指定动画应该播放无限次（永远）

direction 			指定是否应该轮流反向播放动画。
    值								描述
    normal					默认值。动画按正常播放。
    reverse							动画反向播放。
    alternate				动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
    alternate-reverse		动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...)正向播放。

fill-mode 	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
    值									描述
    none					默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
    forwards				在动画结束后（(由animation-iteration-count决定)，动画将应用该属性值。

    backwards				动画将应用在animation-delay定义期间启动动画的第一次迭代的关键帧中定义的属性值。							  这些都是from关键帧中的值（当animation-direction为 "normal"或 									   "alternate”时)或 to 关键帧中的值（当animation-direction										    为"reverse"或"alternate-reverse"时)。

    both					动画遵循forwards 和 backwards的规则。也就是动画会在两个方向上扩展动画属性。



play-state		指定动画是否正在运行或已暂停。
    值						描述
    paused					指定暂停动画
    running					指定正在运行的动画



@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
@keyframes myfirst
{
    from {background: red;}
 	to {background: yellow;}
}
把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：
div{animation: myfirst 5s;}

也可以使用百分比
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

10、弹性盒子（Flex Box）

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

display:flex;弹性盒子布局

flex-direction

flex-direction 属性决定主轴的方向（即项目的排列方向）。

flex-direction: row | row-reverse | column | column-reverse;

• 它可能有4个值。

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap: nowrap | wrap | wrap-reverse;

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

flex-flow: <flex-direction> || <flex-wrap>;

justify-content属性

justify-content: flex-start | flex-end | center | space-between | space-around;

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性

align-items属性定义项目在交叉轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch;

• 它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性

align-content属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

该属性可能取6个值。

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

项目的属性(以下属性设置在项目(item)上)

order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order: <integer>;

flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-shrink: <number>; /* default 1 */

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex-basis: <length> | auto; /* default auto */

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。