1.flex布局
display：flex，即在父元素当中设置，使得子元素受弹性盒子限制，默认排成一行，若超出一行，则按比例压缩。
flex：1，在子元素当中设置，设置子元素如何分配父元素的空间，且子元素的宽度占满父元素。flex属性是flex-grow、flex-shrink与flex-basis的简写，默认值为0 1 auto，后两个属性可选。flex-grow属性定义项目的放大比例，默认为0，flex-shrink，属性定义了项目的缩小比例，默认值为1。flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。默认值为auto，即项目本身的大小。flex这个属性，建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
注意，若设置了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:规定完成过渡效果需要多少秒或者毫秒；注意！这个始终需要设置，否则时长为0，就不会产生过渡效果了。
3).transition-timing-function:规定速度效果的速度曲线；
4).transition-delay:定义过渡效果何时开始。
animation
animation是由三部分组成的。
1).关键帧，定义动画在不同阶段的状态。
2).动画属性，决定动画的播放时长，播放次数，以及何种函数式去播放动画等。
3).css属性，就是css元素不同关键帧下的状态。
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，且left、right、top、bottom均为0；
3.已知宽度的情况下，设置margin:0 auto；
4.position:absolute+left:50%+translate:translateX(-50%);
7.如何设置垂直居中？
1.设置line-height等于height（注意，line-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:middle}
2.基于绝对定位：
1).若要居中的元素宽高已知，可以利用负的margin，值为元素本身的高宽的一半
#child{
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
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;
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；}