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);
CACHE MANIFEST
#version 1.0
CACHE:
index.html
css/mian.css
NETWORK:
#星号表示除上述文件之外的所有文件都应该下载。
*
<html manifest = 'xxxxx.appcache'>
- 注意:一旦写有缓存清单,缓存的内容一旦更新,需更新缓存清单(更改缓存清单的版本号)
- 通过applicationCache的updateready事件判断是否有版本更新
applicationCache.onupdateready = function (){
var result = window.confirm("网站有更新,是否更新网页?");
if(result){
location.reload();
}
}