1. Meta characters use:
[]: all options
||: tie
|: Multiple choice
?: 0 or one
*: 0 or more
{}: Scope
2. CSS3 attribute selector:
E[attr]: There is an attr attribute;
E[attr=val]: The attribute value is exactly equal to val
E[attr*=val]: The attribute value contains the val character and is in "any" position
E[attr^=val]: The attribute value contains the val character and is at the "start" position
E[attr$=val]: The attribute value contains the val character and is at the "end" position
3. CSS3 pseudo-class selector:
P:first-child: The first child element of the parent element of the P element (the first element must be a p tag, otherwise it is invalid)
P:last-child: The last child of its parent element
P:nth-child(n): The nth child element of its parent element (n follows a linear change, and its value is 0, 1, 2, 3, 4...)
P:nth-last-child(n): the nth child element of its parent element (counting backwards)
4. Pseudo class:
E:empty : Empty pseudo-class; selects the E element without any child nodes; (not very widely used)
E:target : target pseudo-class; used in conjunction with the anchor point, the element at the current anchor point will be selected;
E:not(selector) : exclude pseudo-classes; elements other than selectors (arbitrary selectors) will be selected;
5. Pseudo elements:
1、E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
2、E::first-line 文本第一行；
3、E::selection 可改变选中文本的样式；
4、E::before和E::after：在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
6.颜色：
RGBA：Red、Green、Blue、Alpha（红、绿、蓝、透明度）
HSLA：Hue、Saturation、Lightness、Alpha（色调（0-360）、饱和度（0%~100%）、亮度（0%~100%）、透明度（0~1））
注意：Alpha透明度相较opacity不可继承，不会影响子元素的透明度。
关于CSS透明度：
1、opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；
2 、transparent 不可调节透明度，始终完全透明
7.文本阴影 text-shadow（水平偏移量，垂直偏移量，模糊度，颜色）
如：text-shadow: 2px 2px 2px #CCC;（模糊度是不能为负值）
8.盒模型
1、box-sizing: border-box 盒子大小为 width
2、box-sizing: content-box 盒子大小为 width + padding + border
9.边框圆角 border-radius
10.边框阴影 box-shadow（水平偏移量，垂直偏移量，模糊度，颜色）
如box-shadow: 5px 5px 5px #CCC（模糊度是不能为负值；inset可以设置内阴影）
11.边框图片 border-image
参数详解
1、border-image-source
指定图片路径
2、border-image-repeat
指定裁切好的虚拟图片的平铺方式
a) round会自动调整尺寸，完整显示边框图片
b) repeat 单纯平铺,多余部分，会被“裁切”而不能完整显示。
3、border-image-slice
4、border-image-width
设置边框背景区域的大小，这个值的大小不会影响到盒子的大小。
12.背景
1.background-size：背景图片大小
其参数设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
2、background-origin：背景图片定位的(background-position)参照原点
参数：
border-box以边框做为参考原点；
padding-box以内边距做为参考原点；
content-box以内容区做为参考点；
3、background-clip：对背景区域进行裁切，改变背景区域大小
参数：
border-box裁切边框以内为背景区域；
padding-box裁切内边距以内为背景区域；
content-box裁切内容区做为背景区域；
13.渐变
1.线性渐变（横向的）：linear-gradient【必要元素：方向、起始色、终止色、渐变距离】
2.径向渐变（由一个中心点开始扩散）：radial-gradient【必要元素：圆半径，中心点、起始色、终止色、渐变范围】
注：
注意：a 关于中心点
中心位置参照的是盒子的左上角，例如background-image: radial-gradient(120px at 0 0 yellow green)其圆心点为左上角，background-image: radial-gradient(120px at 0 100% yellow green)其圆心为左下角。
b 关于辐射范围
其半径可以不等，即可以是椭圆，如background-image: radial-gradient(120px 100px at 0 0 yellow green)会是一个椭圆形（横轴120px、纵轴100px）的渐变。
14.过渡 transition
过渡属性详解：
设置过渡属性：transition-property: all；
设置过渡时间：transition-duration: 2s;
过渡延时：transition-delay: 3s;
过渡速度：transition-timing-function: linear;
15.2D转换
1.移动 translate(X轴方向移动的距离，Y轴方向移动的距离)，单位像素值或者百分百，当为百分比时，是相对于自身的宽度和高度；
2.缩放scale(水平缩放，垂直缩放)，值可以取小数。
3.旋转 rotate(deg) ：正值为顺时针，负值为逆时针；
4.倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
5.矩阵matrix() 把所有的2D转换组合到一起，需要6个参数（了解）。
6.transform-origin可以调整元素转换的原点
连写：transform: translate() rotate() scale() 顺序会影响转换的效果。
16.3D转换
rotateX：绕X轴旋转
rotateY：绕Y轴旋转
rotateZ.：绕Z轴旋转
translateX：在X轴移动
translateY：在Y轴移动
translateZ：在Z轴移动
用法：transform: rotateX(180deg); 表示绕X轴转180度
其他：
透视：perspective：
a) 作为一个属性，设置给父元素，作用于所有3D转换的子元素
b) 作为transform属性的一个值，做用于元素自身
transform-style: preserve-3d; 让元素在3D空间展示
backface-visibility：设置元素背面是否可见
学习文档：CSS3动画库；animate.css
17.CSS3动画
原理：设置多个节点来精确控制一个或者一组动画。
1.必要元素：
a、通过@keyframes指定动画序列；
/*定义动画序列*/
@keyframes rotate {
0% {
transform: rotateZ(0deg) scale(1);
}
50% {
}
100% {
transform: rotateZ(360deg) scale(2);
}
}
b、通过百分比将动画序列分割成多个节点；
c、在各节点中分别定义各属性
d、通过animation将动画应用于相应元素；
2.关键属性
a、animation-name设置动画序列名称
b、animation-duration动画持续时间
c、animation-delay动画延时时间
d、animation-timing-function动画执行速度，linear、ease等
e、animation-play-state动画播放状态，running、paused等
f、animation-direction动画逆播，alternate等
g、animation-fill-mode动画执行完毕后状态，forwards、backwards等
h、animation-iteration-count动画执行次数，inifinate等
i、steps(60) 表示动画分成60步完成
3.连写：animation: rotate 3s infinite linear;
18.伸缩布局 display：flex
1、必要元素：
a、指定一个盒子为伸缩盒子 display: flex
b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction
c、明确主侧轴及方向
d、可互换主侧轴，也可改变方向
2、各属性详解
a、flex-direction调整主轴方向（默认为水平方向）
b、justify-content调整主轴对齐
c、align-items调整侧轴对齐
d、flex-wrap控制是否换行
e、align-content堆栈（由flex-wrap产生的独立行）对齐
f、flex-flow是flex-direction、flex-wrap的简写形式
g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
h、order控制子项目的排列顺序，正序方式排序，从小到大
19.Web字体
五种字体类型：
A .ttf
B .otf
C .woff
D .eot
E .svg
查找中文字体的网站：http://www.zhaozi.cn/、http://www.youziku.com/
20.字体图标
用法：
1.定义字体，名字随便起
如：@font-face {
font-family: peach;
/* 指定字体文件，保证所有浏览器都能识别 */
src: url(../fonts/MiFie-Web-Font.ttf) format("truetype"), url(../fonts/MiFie-Web-Font.svg) format("svg"), url(../fonts/MiFie-Web-Font.woff) format("woff")
}
2.用乱码
.icon-mobilephone::before {
content: "\e908";
}
参考：
Font Awesome 使用介绍
http://fontawesome.dashgame.com/
定制自已的字体图标库：
过程：UI倒出svg格式的图片（矢量图）-->上传至iconfont.cn/其他-->生成字体图标-->生成字体文件
其他：
http://iconfont.cn/
https://icomoon.io/
SVG素材
http://www.iconsvg.com/
做好每一件小事。