@羯瑞

HTML5存储

cookies

  • 大小限制4K
  • 发送在http请求头中
  • 子域名能读取主域名的cookies

本地存储 localStorage sessionStorage

  • 大小限制5M（注意超出限制处理，超过时setItem会抛出异常）
  • 可以存储数组、json、图片（canvas编码base64）、脚本、样式文件
  • 子域名之间不共享

离线存储 Application Cache

  • <html manifest="manifest:appcache">
  • 移动端大多数都兼容
  • 如果有更新必须修改服务端manifest文件
  • 页面数据更新 需要二次更新才能拿到最近的数据。有缓存读取的是最后一次数据
  • 更新是全局性的，无法单独更新某个文件
  • 链接后面带参数是缓存的是分别缓存的：chenrf.com/?a=1 不同于 chenrf.com
  • 适用于：单页面，数据不常更新的，实时性不高的，离线webapp

indexedDB本地数据库

indexedDB 是一个本地数据库，该数据库是一种存储在客户端本地的 NoSQL 数据库，它可以存储大量的数据。

一个网站可以有多个 indexedDB 数据库，但每个数据库的名称是唯一的。我们需要通过数据库名来连接某个具体的数据库

其他的本地存储（可以忽略）

  • userData 仅支持IE浏览器，大小现在64K
  • google Gears 版本12.0以前

absolute技巧

  • 无依赖跟随实现；去relative化，设置元素absolute，不设置top、right、left、bottom只设置margin值；

  • 元素居中：position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;IE7+支持
  • 在移动端的布局使用，top + footer 内容区块 overflow:auto自适应显示滚动条
.content {

    position: absolute;

    left: 0;

    right: 0;

    top: 48px;

    bottom: 53px;

    overflow: auto;

}

overflow技巧

  • 无论什么浏览器，滚动条均来自<html>而不是<body>
  • 谷歌浏览器document.body.scrollTop,其他浏览器document.documentElement.scrollTop
  • 最后元素的padding-bottom缺失问题，谷歌浏览器正常-其他浏览器缺失
  • 获取滚动条宽度(大都17PX)，外层宽度 - document.getElementById('chen').clientWidth
  • 解决浏览器高不足滚动条显示&出现的不友好：padding-left:calc(100vw - 100%);tips:100vw浏览器宽度
  • ios原生滚动回调效果：-webkit-overflow-scrolling:touch
  • overflow:hidden + 锚点定位可以实现切换效果
<div class="box" style="overflow: hidden;">

    <div class="list" id="one">1</div>

    <div class="list" id="two">2</div>

    <div class="list" id="three">3</div>

    <div class="list" id="four">4</div>

</div>

<div class="link">

    <div class="click" href="#one">1</div>

    <div class="click" href="#two">2</div>

    <div class="click" href="#three">3</div>

    <div class="click" href="#four">4</div>

</div>

line-height技巧

  • line-height基于基线对齐，不同字体有些许差异
//清除图片底部间距,3种方法

img{display:block;}

img{verticl-align:bottom;}

img{font-size:0;}

.box{line-height:0;}

//多行文字居中

.box{line-height:250px;text-align:center;}

.box>.txt{display:inline-block;line-height:normal;verticl-align:middle;}

vertical-algin技巧

  • vertical-algin百分比值是相对于line-height计算的
  • text-algin:justify;实现两端对齐文本效果。
  • 近似垂直居中：元素垂直中心点和父级基线上1/2 X-height对齐。完全居中方法父级：font-size:0;
  • 小图标与文字对齐可以用vertical-algin：负值
//图片垂直居中

<div><img src=""chenrf.jpg /><i></i></div>

img{vertical-algin:middle}

i{display:inline-block;height:100%;vertical-algin:middle}

//多行文字垂直居中

<div><span>我有好几行</span><i></i></div>

span{vertical-algin:middle;display:inline-block;}

i{display:inline-block;height:100%;vertical-algin:middle}

relative + z-index技巧

  • 尽量避免使用relative，内容模块左上角定位absolute+margin就可以实现
  • z-index自作用于定位元素上 relative、abslute、fixed、sticky
  • z-index层级：祖先优先原则、后来居上原则、哪个大居上原则
  • z-index避免高层级覆盖、层级混乱，一般项目中不超过2
  • z-index弹窗层级问题，可以利用js获取body页面中最大的z-index然后+1
  • z-index负值访问性隐藏，跟text-indent:9999px；同个思路

margin技巧

  • 普通元素百分比的margin是相对于容器的宽度计算的
  • 绝对定位元素百分比的margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的
  • margin重叠：相邻的兄弟元素、父级和第一个/最后一个元素、空的block元素；只发生在block水平元素，margin-top和margin-bottom；文字垂直展示writing-mode除外

  • margin重叠高度：正正取大值、正负值相加、负负取负值

  • 其他扩展：margin-start/margin-end;针对文字的书写方向；水平margin-startmargin-left,垂直：margin-startmargin-top

padding技巧

//三栏图标重点：background-clip: content-box;

.box{width: 100px;height: 20px;border-top: 20px solid;border-bottom:20px solid;background-color: #000;background-clip: content-box;padding:20px 0;}

<div class="box"></div>

border技巧

  • 可以利用border-style:dotted——点状绘制圆角的效果
  • 可以利用border-style:double——双线绘制更多的图标
  • border-color值未定义的时候，默认使用的色值就是color的值，如果该标签没有定义，遍历父级。可以利用此特性处理hover效果，不用再单独定义top或bottom的值
  • 可以设置border色值为透明transparent，以定位background-position靠右多少像素。background-position的值默认以右上角为基准
  • border等高布局（不支持百分比高度）

前端读者 | 关于存储及CSS的一些技巧的更多相关文章

  1. 前端读者 | 别人写的css，你敢用吗？

    本文来自@yeaseonzhang:链接:http://yeaseonzhang.github.io/2018/04/10/%E5%88%AB%E4%BA%BA%E5%86%99%E7%9A%84cs ...

  2. (转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

    BAT及各大互联网公司2014前端笔试面试题--Html,Css篇   很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是 ...

  3. 进击的Python【第十三章】：Web前端基础之HTML与CSS样式

    进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...

  4. 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作

    前端自动化(三)   合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...

  5. 好程序员web前端分享18个用CSS制作出来的东西

    好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和 ...

  6. 好程序员web前端分享值得参考的css理论：OOCSS、SMACSS与BEM

    好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCS ...

  7. 前端学习之路之CSS （一）

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 简介:    CSS 指层叠样式表 (Cascading Style Sheets)    样式定义如何显示 HT ...

  8. 前端进阶（12） - css 的弱化与 js 的强化

    css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势, ...

  9. 前端开发神一样的工具chrome调试技巧

    前端开发神一样的工具chrome调试技巧 文章来自  Colin-UED // 与您分享前端开发知识 主页 Javascript HTML CSS NodeJs User Experience FE ...

随机推荐

  1. iOS开发ARC机制下的内存管理技术要点

    转载一篇: iOS开发ARC内存管理技术要点.ARC内存管理原则总结.iOS ARC内存管理总结 ARC内存管理机制 (一)ARC的判断准则: 只要没有任何一个强指针指向该对象,该对象就会被释放. ( ...

  2. Hdu3579 Hello Kiki

    Hello Kiki Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  3. JS 中类型鉴别

    JS中的基本类型有:数字(Number(NaN,Infinity)),字符串(String),Undefined,Null,Boolean 引用类型有:数组(Array),对象(Object),函数( ...

  4. ZooKeeper管理员指南——部署与管理ZooKeeper

    1.部署 本章节主要讲述如何部署ZooKeeper,包括以下三部分的内容: 系统环境 集群模式的配置 单机模式的配置 系统环境和集群模式配置这两节内容大体讲述了如何部署一个能够用于生产环境的ZK集群. ...

  5. Android 百度定位SDKv4.2及6.0_百度定位实例_安卓定位实例

    介绍 由于项目需要.前几天一直在研究百度定位的功能.通过不断的实践终于有结果了.不愿意独享 现在我把我的研究成果和大家分享一下.其实百度的 API 已经相当不错了 这之所以要写出来.一是自己做一个笔记 ...

  6. 洛谷 P1976 鸡蛋饼

    题目背景 Czyzoiers 都想知道小 x 为什么对鸡蛋饼情有独钟.经过一番逼问,小 x 道出 了实情:因为他喜欢圆. 题目描述 最近小 x 又发现了一个关于圆的有趣的问题:在圆上有2N 个不同的点 ...

  7. svn: Checksum mismatch while updating 错误

    最近使用svn客户端更新代码的时候出现 Checksum mismatch while updating 的错误 解决办法 在出错文件的目录下,用update to reversion , 先选onl ...

  8. 例子Architecting Android…The clean way?----代码分析

    Presention层:   整个应用启动的时候,就执行依赖的初始化.编译项目之后,Dagger依赖框架使用ApplicationComponent生成一个DaggerApplicationCOmpo ...

  9. 获取子iframe框架的元素

    我们常常遇到使用iframe框的时候,该iframe框不能根据自己内部的内容撑起来的这种问题 必要条件:不能在跨域的情况下...本地可以放到localhost下进行测试 //父页面index.html ...

  10. Java常用开发思想与知识点小记(一)

    1.   子类在覆盖父类的方法时,不能抛出比父类更多的异常(儿子不能比父亲干更多的坏事),所以只能捕捉异常,通常在web层捕获异常,给用户一个友好提示. 2.Java内存模型与并发编程三个特性 htt ...