css3弹性盒子（伸缩布局）

display:flex;（块级行内都能使用，弹性盒子不能和浮动一起使用）

• 盒子居中(给父盒子添加以下属性,容器添加属性)

display:flex;
justify-content:center;
align-items:center;

• 概念一：容器和项目
  外面的盒子是容器，里面的盒子是项目
• 概念二：主轴和交叉轴
  主轴的方向由项目的排列方向决定
  交叉轴是与主轴互相垂直的那条轴
• 弹性盒子默认横着排列

flex-direction:colum; //竖着排列
flex-direction:row; //横着排列

• 弹性盒子默认不换行

flex-wrap:wrap;//换行
flex-wrap:wrap-reverse;

离线缓存

• 检测

if(navigator.onLine){
  alert('网络连接');
}else{
  alert('网络未连接');
}

• 动态检测

window.addEventlistener('online',onlineCallback);
window.addEventlistener('offline',onlineCallback);

• 书写缓存清单
  清单文件后缀 .appcache

CACHE MANIFEST 
#version 1.0 
CACHE:
index.html 
css/mian.css    
NETWORK:
#星号表示除上述文件之外的所有文件都应该下载。
*

• 将html和缓存清单绑定

• 注意：一旦写有缓存清单，缓存的内容一旦更新，需更新缓存清单（更改缓存清单的版本号）
• 通过applicationCache的updateready事件判断是否有版本更新

applicationCache.onupdateready = function (){
  var result = window.confirm("网站有更新，是否更新网页？");
  if(result){
    location.reload();
  }
}