常用前端知识积累
闭包的理解
使用闭包主要是为了设计私有的方法和变量。
优点是可以避免全局变量的污染，
缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露
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;
}
