@羯瑞

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. 手脱ASProtect v1.2(无Stolen Code)

    1.载入PEID ASProtect v1.2 2.载入OD > 01C04200 push 跑跑赛道.0042C001 ; //入口处 C3 retn AA stos byte ptr es: ...

  2. js ejs for语句的第二种遍历用法

    var A = {a:1,b:2,c:3,d:"hello world"}; for(var k in A) { console.log(k,A[k]); var h = new ...

  3. 获取文件名称 basename 用法

    <?phpheader('Content-type:text/html;charset=utf8'); $str = '2390230.png';$str_arr = explode('.',$ ...

  4. uboot主Makefile分析（t配置和编译过程详解）

    1.编译uboot前需要三次make make distcleanmake x210_sd_configmake -j4 make distclean为清楚dist文件. make x210_sd_c ...

  5. c# 计算时间差---天数

    ---处理两个时间相差的天数 测试数据:三个时间 DateTime dt1 = Convert.ToDateTime("2017-03-17 09:49:55.667"); Dat ...

  6. Test Index

    top1 top11 top2 top1 top11 top2

  7. JS设计模式之装饰者模式

    装饰者模式概述 在不改变原对象的基础上,通过对其进行包装拓展(添加属性或者方法)使原有对象可以满足用户更复杂的需求 实际需求 在已有的代码基础上,为每个表单中的input默认输入框上边显示一行提示文案 ...

  8. uva10766生成树计数(矩阵树定理)

    更正了我之前打错的地方,有边的话G[i][j]=-1; WA了好多次,中间要转成long double才行..这个晚点更新. #include<cstdio> #include<cs ...

  9. 子DIV块中设置margin-top时影响父DIV块位置的解决办法？

    解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声 ...

  10. ie6下双边距的问题

    1.ie6双边距情况 <div class="red"></div> <div class="blue"></div& ...