关于存储及CSS的一些技巧

HTML5存储

cookies

大小限制4K

发送在http请求头中

子域名能读取主域名的cookies

本地存储 localStorage sessionStorage

大小限制5M（注意超出限制处理，超过时setItem会抛出异常）

可以存储数组、json、图片（canvas编码base64）、脚本、样式文件

子域名之间不共享

离线存储 Application Cache

移动端大多数都兼容

如果有更新必须修改服务端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值；

元素居中：IE7+支持

在移动端的布局使用，top + footer 内容区块 overflow:auto自适应显示滚动条

overflow技巧

line-height技巧

line-height基于基线对齐，不同字体有些许差异

vertical-algin技巧

vertical-algin百分比值是相对于line-height计算的

text-algin:justify;实现两端对齐文本效果。

近似垂直居中：元素垂直中心点和父级基线上1/2 X-height对齐。完全居中方法父级：font-size:0;

小图标与文字对齐可以用vertical-algin：负值

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-start/margin-end;针对文字的书写方向；水平margin-start==margin-left,垂直：margin-start==margin-top

padding技巧

border技巧

可以利用border-style:dotted——点状绘制圆角的效果

可以利用border-style:double——双线绘制更多的图标

border-color值未定义的时候，默认使用的色值就是color的值，如果该标签没有定义，遍历父级。可以利用此特性处理hover效果，不用再单独定义top或bottom的值

可以设置border色值为透明transparent，以定位background-position靠右多少像素。background-position的值默认以右上角为基准

border等高布局（不支持百分比高度）