为什么要用精灵图
为了有效地减少服务器接受和发送请求的次数
meta 视口标签：
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0 user-scalable=no>
移动端开发选择有两种：
单独制作移动端页面（主流）： 流式布局（百分比布局）flex弹性布局，less+rem+媒体查询布局，混合布局和响应式页面 ：媒体查询，bootstarp
css初始化 normalize.css
CSS3盒子模型（IE型盒子，又称怪异型盒子）box-sizing :border-box ; -webkit-box-sizing :border-box;
清除链接的高亮-webkit-tap-highlight-color :transparent;
移动端浏览器默认的外观再iOS上加上这个属性才能给按钮和输入框自定义样式：
-webkit -appearance :none;
流式布局（百分比布局）section：n%（宽度）
二倍精灵图：先让精灵图等比例缩放为原来的一半；之后根据大小测量坐标；注意代码里面background-size也要写：精灵图原来宽度的一半
背景色渐变
背景色渐变必须添加浏览器私有前缀
background: linear-gradient(起始方向，颜色1，颜色2，...)；
background：-webkit-linear-gradient（left，red，blue）；
background ：-webkit-linear-gradient（left top，red，blue）
flex弹性布局：
操作方便，布局简单，移动端应用广泛；pc端浏览器支持情况较差；IE11或更低版本，不支持或仅部分支持
什么是flex布局，flex布局以为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局以后，float，clear和vertical-align属性将失效！
flex布局父项常见属性：
flex-direction：
设置主轴方向；row （默认值）从左到右，row-reverse从右到左；column 从上到下 ； column-reverse 从下到上。
justify-content：设置主轴上的子元素排列方式
justify-content: flex-start ; （默认值）从头开始 如果主轴是x轴，则从左到右
justify-content: flex-end ;从尾部开始排列
justify-content: center;在主轴居中对齐（如果主轴是x轴则水平居中）
space-around 平分剩余空间
space-between 先两边贴边 再平分剩余空间
align-items：设置侧轴上的子元素排列方式（单行）
该属性是控制子项在侧轴上的排列方式在子项为单项（单行）的时候使用
align-items：flex-start 从上到下
flex-end 从下到上
center 挤在一起居中（垂直居中）
stretch拉伸（默认值）
align-content ：设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式 并且只能用于子项出现换行的情况（多行），在单行下是没有效果的
align-content ：flex-start 默认值在侧轴的头部开始排列
flex-end在侧轴尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，再平分剩余空间
stretch 设置子项元素高度平分父元素高度
flex-wrap 设置子元素是否换行
默认情况下，项目都排在一条线（又称“轴线”）上，flex-wrap属性定义，flex布局中默认是不换行的， nowrap默认值，不换行 ；wrap换行
flex-flow 属性是flex-direction和flex-wrap属性的复合属性
例如：flex-flow：row wrap；
flex布局子项常见属性
flex属性
定义子项目分配剩余空间，永flex来表示占多少份数。.item { flex:;}
align-self 控制子项自己在侧轴上的排列方式
order属性定义项目的排列方式
数值越小，排列越靠前，默认为0.注意： 和z-index不一样
Flexbox支持对弹性项的灵活控制。Flex的意思为可伸缩，这体现在以下三个属性中：
1. flex-basis：基础值
2. flex-grow：拉伸弹性系数，如果容器宽度减去弹性项的基础值之和之后还有剩余空间，那么就按照弹性系数比例去分配剩余空间
3. flex-shrink：缩减弹性系数，和拉伸弹性系数逻辑相反
这三个属性应用给弹性项，而不是容器。
HTML5新增特性
语义化标签：
header、nav、article、seaction、aside、footer。
多媒体标签：
音频audio、视频video
video属性：
autoplay自动播放、controls添加组件、loop循环播放、muted静音播放、src视频地址
audio属性：
autoplay、controls、loop、src
input标签类型：
email、number（数字类型）、search、tel（手机号码）
表单属性：
require（内容不得为空-->必填）、placeholder（表单的提示信息）、autocomplete（当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，需要放在表单内，同时加上 name 属性，同时成功提交） off/on 可设置、multiple（可以多选文件提交）
CSS3 的新特性
CSS3 新增选择器
属性选择器
CSS3 过渡 可以让我们在不使用Flash动画或javascript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。低版本浏览器不支持（ie9以下版本） 但是不会影响
页面布局。
过度动画：是从一种状态渐渐的过渡到另外一个状态 transition
常用模块类名命名
