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和缓存清单绑定
<html manifest = 'xxxxx.appcache'>
  • 注意:一旦写有缓存清单,缓存的内容一旦更新,需更新缓存清单(更改缓存清单的版本号)
  • 通过applicationCache的updateready事件判断是否有版本更新
applicationCache.onupdateready = function (){
  var result = window.confirm("网站有更新,是否更新网页?");
  if(result){
    location.reload();
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前段时间接手了一个基于cef1的项目,由于其特别限定的场景,在查询了对html5的支持后,整站都采用了flexbo...
    JSoon阅读 12,117评论 1 10
  • 事实上它是一种新类型的盒子模型,也有书上称作弹性伸缩盒布局。比较新的布局方式:旨在提供一个更加有效的方式来布置,对...
    zh_yang阅读 11,448评论 3 14
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,846评论 1 92
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,561评论 0 6
  • 早上好!#幸福实修#~每天进步1%#幸福实修11班@吕敏一富阳 20170914(1730) 【幸福三朵玫瑰】 昨...
    嘟嘟妈妈2727阅读 239评论 0 0