闭包的理解
使用闭包主要是为了设计私有的方法和变量
优点是可以避免全局变量的污染,
缺点是闭包会常驻内存, 会增大内存使用量, 使用不当很容易造成内存泄露
Cookie
第一: 每个特定的域名下最多生成 20 个 cookie
1.IE6 或更低版本最多 20 个 cookie
2.IE7 和之后的版本最后可以有 50 个 cookie
3.Firefox 最多 50 个 cookie
4.chrome 和 Safari 没有做硬性限制
第二: cookie 的最大大约为 4096 字节, 为了兼容性, 一般不能超过 4095 字节
优点: 极高的扩展性和可用性
1. 通过良好的编程, 控制保存在 cookie 中的 session 对象的大小
2. 通过加密和安全传输技术(SSL), 减少 cookie 被破解的可能性
3. 只在 cookie 中存放不敏感数据, 即使被盗也不会有重大损失
4. 控制 cookie 的生命期, 使之不会永远有效偷盗者很可能拿到一个过期的 cookie
缺点:
1.`Cookie` 数量和长度的限制每个 domain 最多只能有 20 条 cookie, 每个 cookie 长度不能超过 4KB, 否则会被截掉
2. 安全性问题如果 cookie 被人拦截了, 那人就可以取得所有的 session 信息即使加密也与事无补, 因为拦截者并不需要知道 cookie 的意义, 他只要原样转发 cookie 就可以达到目的了
3. 有些状态不可能保存在客户端例如, 为了防止重复提交表单, 我们需要在服务器端保存一个计数器如果我们把这个计数器保存在客户端, 那么它起不到任何作用
浏览器本地存储
sessionStorage
本地存储一个会话 (session) 中的数据, 这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁
因此 sessionStorage 不是一种持久化的本地存储, 仅仅是会话级别的存储
localStorage
用于持久化的本地存储, 除非主动删除数据, 否则数据是永远不会过期的
web storage 和 cookie 的区别
Cookie 的大小是受限的, 并且每次你请求一个新的页面的时候 Cookie 都会被发送过去, 这样无形中浪费了带宽, 另外 cookie 还需要指定作用域, 不可以跨域调用
cookie 需要前端开发者自己封装 setCookie, getCookie
link 和 @import 的区别是
(1) link 属于 html 标签, 而 @import 是 CSS 提供的;
(2) 页面被加载的时, link 会同时被加载, 而 @import 引用的 CSS 会等到页面被加载完再加载;
(3) import 只在 IE5 以上才能识别, 而 link 是 HTML 标签, 无兼容问题;
(4) link 方式的样式的权重 高于 @import 的权重.
box-sizing 属性
box-sizing 属性主要用来控制元素的盒模型的解析模式默认值是 content-box
content-box: 让元素维持 W3C 的标准盒模型元素的宽度 / 高度由 border + padding + content 的宽度 / 高度决定, 设置 width/height 属性指的是 content 部分的宽 / 高
border-box: 让元素维持 IE 传统盒模型 (IE6 以下版本和 IE6~7 的怪异模式) 设置 width/height 属性指的是 border + padding + content
BFC 规范的理解
摘自链接描述
(https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)
级格式化上下文, 是 CSS 中的一个渲染机制, BFC 就相当于一个盒子, 内部的元素与外界的元素互不干扰它不会影响外部的布局, 外部的布局也不会影响到它.
创建 BFC
float 的值不是 none
position 的值不是 static 或者 relative
display 的值是 inline-block, table-cell, flex, table-caption 或者 inline-flex
overflow 的值不是 visible
BFC 的特性
- 内部的 BOX 会在垂直方向上一个接一个的放置
- 于同一个 BFC 的俩个相邻的 BOX 的 margin 会发生重叠, 与方向无关
- 每个元素的左外边距与包含块的左边界相接触(从左到右), 即使浮动元素也是如此
- BFC 的区域不会与 float 的元素区域重叠
- 计算 BFC 的高度时, 浮动子元素也参与计算
- BFC 就是页面上的一个隔离的独立容器, 容器里面的子元素不会影响到外面的元素, 反之亦然
BFC 在布局中的应用
防止 margin 重叠:
要阻止 margin 重叠, 只要将俩个元素别放在一个 BFC 中即可
浮动相关问题
使得父元素包含子元素, 常见的方式是为父元素设置 overflow:hidden 或者浮动父元素根本原因在于创建 BFC 的元素, 子浮动元素也会参与其高度计算, 即不会产生高度塌陷问题
多栏布局的一种方式
与浮动元素相邻的已生成 BFC 的元素不能与浮动元素互相覆盖利用该特性可以作为多栏布局的一种实现方式.
特点在于左右俩栏的宽度固定, 中间栏可以根据浏览器宽度自适应
null 和 undefined 的区别
undefined
undefined 是一个表示无的原始值, 转为数值时为 NaN
变量被声明了, 但没有赋值时, 就等于 undefined
调用函数时, 应该提供的参数没有提供, 该参数等于 undefined
对象没有赋值的属性, 该属性的值为 undefined
函数没有返回值时, 默认返回 undefined
null
null 是一个表示无的对象, 转为数值时为 0
作为函数的参数, 表示该函数的参数不是对象
作为对象原型链的终点
documen.write 和 innerHTML 的区别
document.write 只能重绘整个页面
innerHTML 可以重绘页面的一部分
HTML5 的离线存储
原理
HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术), 通过这个文件上的解析清单离线存储资源, 这些资源就会像 cookie 一样被存储了下来之后当网络在处于离线状态下时, 浏览器会通过被离线存储的数据进行页面展示
使用
在文档的 html 标签设置 manifest 属性, 如 manifest=/offline.appcache
在项目中新建 manifest 文件, manifest 文件的命名建议: xxx.appcache
在 web 服务器配置正确的 MIME-type, 即 text/cache-manifest
css 各种居中
水平居中
inline-block 配合 text-align
- .parent {
- text-align: center;
- }
- .child {
- display: inline-block;
- }
table 配合 margin
- .child {
- display:table;
- margin: 0auto;
- }
abasolute 配合 transform
- .parent{
- position:relative;
- }
- .child{
- position:absolute;
- left:50%;
- transform: translateX(-50%);
- }
垂直居中
table-cell 配合 vertical-align
- .parent{
- display: table-cell;
- vertical-align:middle;
- }
absolute 配合 tranform
- .parent{
- position:relative;
- }
- .child{
- position:absolute;
- top: 50%;
- transform: translateY(-50%);
- }
水平 + 垂直居中
inline-block 配合 text-align 加上 table-cell 配合 vertical-align
- .parent{
- display: table-cell;
- vertical-align:middle;
- text-align:center;
- }
- .child{
- display: inline-block;
- }
absolute 配合 transform
- .parent{
- position: relative;
- }
- .child{
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%,-50%);
- }
全能的 flex
水平居中
- .parent{
- display: flex;
- justify-content: center;
- }
垂直居中
- .parent{
- display: flex;
- align-items: center;
- }
水平垂直居中
- .parent{
- display: flex;
- justify-content: center;
- align-items: center;
- }
来源: http://www.jianshu.com/p/bed02911d2fc