1.flex布局
display：flex，即在父元素当中设置，使得子元素受弹性盒子限制，默认排成一行，若超出一行，则按比例压缩。
flex：1，在子元素当中设置，设置子元素如何分配父元素的空间，且子元素的宽度占满父元素。
注意，若设置了flex布局后，子元素的float、vertical-align与clear属性将失效。
flex-direction:即项目的方向，设置在父元素中。可能有四个值：row，即默认值，主轴为水平方向，从左至右；row-reverse：主轴亦为水平方向，起点在右端；column：主轴为垂直方向，起点在上沿。column-reverse，主轴亦为垂直方向，起点在下沿。
flex-wrap:默认情况下，项目都排在一条线上。nowrap，即表示不换行；wrap，即换行，第一行在上方；wrap-reverse，换行，第一行在下方。
flex-flow：为flex-direction、flex-wrap的简写形式，默认情况下为row nowrap。
justify-content：定义了item在主轴上的对齐方式，主轴从左至右：flex-start（默认），左对齐；flex-end：，右对齐；center：居中；space-around：每个项目两侧间隔相等 ；space-between：两端对齐，项目之间的间隔相等。
align-items：定义了在交叉轴上的对齐方式。flex-start：交叉轴的起点对齐；flex-end：交叉轴终点对齐；center：交叉轴中点对齐；baseline：第一行文字的基线对齐。
align-content:定义了多根轴线的对齐方式，若只有一根轴线，则不起作用。flex-start:与交叉轴起点对齐；flex-end：与交叉轴终点对齐；center：与交叉轴中点对齐；space-between：轴线之间的间隔平均分布，与交叉轴两端对齐；space-around：每根轴线两侧间隔都相等。
2.css3的一些新特性
transition
1).transition-property:设置过渡效果的css属性的名称；
2).transition-duration:规定完成过渡效果需要多少秒或者毫秒；
3).transition-timing-function:规定速度效果的速度曲线；
4).transition-delay:定义过渡效果何时开始。
animation
animation属性可以像flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。实现动画效果主要由两部分组成：
1、通过类似flash动画的帧来声明一个动画；
2、在animation属性中调用关键帧的动画.
3.img中alt与title的区别
图片中的alt为，当图片无法正常显示的时候，所出现的文本提示，alt有利于SEO优化。
图片中的title属性是鼠标移动到元素上的文本提示。
4.css纯画一个三角形
<head> <style> div { width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000; } </style> </head> <body> <div></div> </body>
5.盒模型
盒模型的组成从里至外为：content、padding、border、margin
标准盒子模型中的width为content
低标准的IE盒子模型中，width为content+padding+border
6.如何实现水平居中？
1).行内元素：text-align:center；
2).块状元素中：
1.flex布局的情况下，设置justify-content:center；
2.已知宽度的情况下，设置margin为0；
3.已知宽度的情况下，设置margin:0 auto；
4.position:absolute+left:50%+translate:translateX(-50%);
7.如何设置垂直居中？
1.设置line-height等于height
2.position:absolute+top:50%+translate:translateY(-50%);
3.flex布局的情况下，align-items:center;
4.display:table+display:table-cell+vertical-align:middle
8.如何将一个div水平垂直居中？
1.基于表格样式：
#father{display:table;}
#child{display:table-cell;
text-align:center;
vertical-align:center}
2.基于绝对定位：
1).若要居中的元素宽高已知，可以利用负的margin，值为元素本身的高宽的一半
#child{
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
width:100px;
height:100px;}
2).宽高已知的情况下：
#child{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);}
3).宽高已知的情况下：
.absolute-center{
margin:auto;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:50%;
height:50%}
3.基于视口单位：
#view-child{
margin：50px auto 0；
transform：translateY（-50%）；
}
4.flex用法：
1.当父元素中设置display为flex后，子元素设置为margin：auto
#father{display：flex；}
#child{margin：auto；}
2.单纯在父元素中设置
#father{
display：flex；
align-items：center；
justify-align：center；}