前端常用知识小结

1.闭包

使用闭包主要是为了设计私有的方法和变量。优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当容易造成内存泄漏。

2.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数量和长度的限制，长度超常会被截掉

        （2）安全性问题，如果cookie被人拦截，就可以取得所有的session信息，即使加密也于事无补，因为拦截者原样转发cookie就可以达到目的了。

        （3）有些状态不可能保存在客户端。例如 为了防止重复提交表单会在服   务器保存一个计数器。

    3.浏览器本地存储

        （1）sessionStorage：本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionstorage不是一种持久化的本地存储，仅仅是会话级别的存储。

        （2）localstorage：用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

    4,webstrage和cookie的区别

        cookie的大小是受限制的，并且每次请求一个新页面的时候cookie都会           被 发送过去，这样无形中浪费了带宽，另外cookie需要指定作用   域，               不  可以跨域调用cookie，需要前端开发者自己封装setcookie，getcookie

3.link和@import的区别

    （1）link是属于html标签，@import是css提供的

    （2）页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完在加载

    （3）import 只在ie5以上才能识别，而link是html标签，无兼容问题

    （4）link方式的样式的权重高于@import的权重

4.box-sizing属性

    box-sizing:content-box      ------  传统盒模型

    box-sizing:boder-box  -------  宽高包括 border+padding+content

5.BFC(块级格式化上下文)

实例：https://www.jianshu.com/p/fc1d61dace7b

BFC：是css中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外部元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它。

创建BFC：

    （1）float的值不是none

    （2）position的值不是static或者relative

    （3）display的值是inline-block,table-cell,fex,table-caption,inline-flex

    （4）overflow的值不是visible

BFC的特性

    （1）内部的box会在垂直方向上一个接一个的放值

    （2）与同一个BFC的两个相邻的box的margin会发生重叠，与方向无关

    （3）每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此

    （4）BFC的区域不会与float的元素区域重叠

    （6）计算BFC的高度时，浮动子元素也参与计算

    （7）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

BFC在布局中的应用：

    （1）要阻止margin重叠，只要将两个元素别放在一个BFC即可

    （2）避免高度塌陷：父元素设置为overflow：hidden，因为在创建BFC时，子浮动元素也会参与高度计算

    （3）与浮动元素相邻的已生成BFC的元素，不能与浮动元素相互覆盖。利用该特性可以作为多栏布局的一种实现方式，特点在于左右两栏的宽度固定，中间栏可以根据浏览器宽度自适应。

6.null和undefined的区别

    undifined ： 无 的原始值，转换为数字为NAN

        (1)变量被声明了，但没有被赋值，为undifined

        （2）调用函数时，应该提供的参数没有提供，改参数等于undifined

        （3）对象么有赋值的属性，改属性的值为undifined

        （4）函数没有返回值时，默认返回undifined

    null：一个无的对象 转换为数值时为0

        （1）作为函数的参数，表示该函数的参数不是对象

        （2）作为对象原型链的终点

7.document.write   innerHTML的区别：前者是重绘整个页面，后者是可以重绘页面的一部分

8.

9.css 居中

（1）水平居中

        1.   .parent{ text-align:center}  .child{ display:inline-block}

        2    .child{ display:table;  margin:0 auto}

        3.   .parent{position:relative}   .child{  position:absolute;left:50%;transform:translateX(-50%)}

        4  .   .parent{ display:flex; justify-content: center}

    （2）垂直居中

        1.  .parent{ display:flex; align-items:center}

        2. .parent{ display:table-cell; vertical-align:middle}

        3.   .parent{ display:relative}  .child{position:absolute; top:50%; transform:translateY(-50%)}