关于存储及CSS的一些技巧

栏目: Html5 · 发布时间: 6年前

内容简介：indexedDB 是一个本地数据库，该数据库是一种存储在客户端本地的 NoSQL 数据库，它可以存储大量的数据。一个网站可以有多个 indexedDB 数据库，但每个数据库的名称是唯一的。我们需要通过数据库名来连接某个具体的数据库

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

本地存储 localStorage sessionStorage

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

离线存储 Application Cache

<html manifest="manifest:appcache">

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;

.content {
    position: absolute;
    left: 0;
    right: 0;
    top: 48px;
    bottom: 53px;
    overflow: auto;
}
复制代码

overflow技巧

无论什么浏览器，滚动条均来自而不是
谷歌浏览器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-start==margin-left,垂直：margin-start==margin-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等高布局（不支持百分比高度）

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

图论算法理论、实现及应用

王桂平//王衍//任嘉辰 / 北京大学 / 2011-1 / 54.00元

《图论算法理论、实现及应用》系统地介绍了图论算法理论，并选取经典的ACM／ICPC竞赛题目为例题阐述图论算法思想，侧重于图论算法的程序实现及应用。《图论算法理论、实现及应用》第1章介绍图的基本概念和图的两种存储表示方法：邻接矩阵和邻接表，第2～9章分别讨论图的遍历与活动网络问题，树与图的生成树，最短路径问题，可行遍性问题，网络流问题，支配集、覆盖集、独立集与匹配，图的连通性问题，平面图及图的着色问......一起来看看《图论算法理论、实现及应用》这本书的介绍吧!

码农工具