一、css3选择器
1、 [class~=flower]
2、 [class|=box]
3、 :focus
4、 p::first-letter
5、 p:first-child
6、 ::after ::before
7、 [class^=red]
8、.box2 [class$=red]
9、.box2 [class*=red]
10、.box3 h1:first-of-type
11、 tr:nth-child(2n+1)
12、 :disabled
二、css3的浏览器私有前缀
chrome/safari : -webkit-
FF: -moz-
ie: -ms-
Opera: -o-
!!!!!!如何处理私有前缀：autoprefixer
三、css3的过渡
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
简写： transition: width 1s linear 2s;
三种形式
transition: all 1s;
transition: width 1s;
transition: width 1s,height .5s 3s;
四、图标字体
1、 使用图标字体的原理
（1） 引入字体文件 *.ttf或其它
（2）在html文件中：定义字体
@font-face{
font-family: 'mzd';
src:'字体文件的地址'
}
(3)使用字体
.box {
font-family: 'mzd'
}
2、使用时的两种方案
(1)阿里巴巴图标字体
（2）font-awesome: 图标字体库
五、transform变形
transform: translate(x,y);
transform: translate3d(x,y,0);
transform: rotate(30deg);
transform: scale(2);
transform: skew(30deg,45deg)
transform-origin:x y
六、animation动画
1、animation动画的使用方法
(1)先定义动画规则
@keyframes ripple{
0% {}
25% {}
}
(2)使用动画规则
.box {
animation: ripple 3s;
}
2、animation的属性（不需记忆，但能看懂）
animation: fly 2s;
animation-name: fly;
animation-duration: 2s;
animation-timing-function: cubic-bezier(.46,-0.48,.24,1.46);
animation-delay: 2s;
/* infinite是无限次 */
animation-iteration-count:2 ;
animation-direction:alternate;
animation-play-state: paused;
animation-fill-mode: both; // backwards forwards
七、3d变换 （仅做理解）
1、能够实现3d立体效果的属性
transform: rotateX()
transform: rotateY()
transform: translateZ()
2、3d动画效果中最重要的属性
（1）perspective: 舞台上
(2) transform-style: preserve-3d; (加在3d变换元素的父元素上，在动画中，一般是控制父元素的动画)
（3）变形的中心点： transform-origin : x轴 y轴 z轴; （z轴要用具体的像素）
（5）背面隐藏： backface-visibility: hidden;
八、媒体查询&响应式布局 （重点！！！！！！！！）
1、设置视口（了解）：
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
2、根据屏幕宽度，加载不同的*.css文件
<link rel="stylesheet" href="css/responsive.css" media="(max-width:1200px) and (min-width: 992px)">
3、（重点）根据屏幕宽度，设置不同的css样式
@media (max-width: 1200px) and (min-width: 992px){
.wrapper { width:970px; margin:0 auto; }
.header .nav>ul>li>a { width:100px; }
}
@media (max-width: 992px) and (min-width: 768px){
.wrapper { width:750px; margin:0 auto; }
.header .nav>ul>li>a { width:70px; font-size:12px;}
.header .logo img {width: 100px; height: auto;}
}
@media (max-width: 768px){
.wrapper { width:90%; margin:0 auto; }
.header .nav { display: none;}
.header .logo img {width: 100px; height: auto;}
}
九、css边框： border-radius: 50%;
十、css背景： background-size: 199px | 100% | cover | contain
十、渐变：
线性渐变 ：
background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, #fff), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));
background: linear-gradient(#f00, #00f, #0f0);
径向渐变：
background: -webkit-radial-gradient(red, green, blue);
/* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue);
/* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue);
/* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue);
十一、盒子阴影：
box-shadow: 1px 2px 4px #f00
十二、border和padding 添加在content区域： box-sizing: border-box;
十三、省略号： (1)overflow:hidden; (2)white-space:nowrap (3) text-overflow: ellipsis;
十四、弹性盒子
添加在伸缩容器上
display: flex
flex-direction: row
justify-content: flex-start
align-items: flex-start
flex-wrap: wrap;
flex-flow: row wrap;
align-content: flex-start; (多行的对齐方式)
添加在伸缩项目上
单个项目的对齐方式
align-self: flex-end;
flex: 1;
margin-right: auto;
order: 1;
