css3弹性盒子（伸缩布局）
2017-08-21 本文已影响0人
_Enco_
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和缓存清单绑定
<html manifest = 'xxxxx.appcache'>
- 注意：一旦写有缓存清单，缓存的内容一旦更新，需更新缓存清单（更改缓存清单的版本号）
- 通过applicationCache的updateready事件判断是否有版本更新
applicationCache.onupdateready = function (){
var result = window.confirm("网站有更新，是否更新网页？");
if(result){
location.reload();
}
}
