摘要：閉包的理解使用閉包主要是為了設(shè)計(jì)私有的方法和變量。只在中存放不敏感數(shù)據(jù)，即使被盜也不會有重大損失。每個最多只能有條，每個長度不能超過，否則會被截掉。有些狀態(tài)不可能保存在客戶端。例如，為了防止重復(fù)提交表單，我們需要在服務(wù)器端保存一個計(jì)數(shù)器。

使用閉包主要是為了設(shè)計(jì)私有的方法和變量。
優(yōu)點(diǎn)是可以避免全局變量的污染，
缺點(diǎn)是閉包會常駐內(nèi)存，會增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露

第一：每個特定的域名下最多生成20個cookie

1.IE6或更低版本最多20個cookie
2.IE7和之后的版本最后可以有50個cookie。
3.Firefox最多50個cookie
4.chrome和Safari沒有做硬性限制

第二：cookie的最大大約為4096字節(jié)，為了兼容性，一般不能超過4095字節(jié)

優(yōu)點(diǎn):極高的擴(kuò)展性和可用性

1.通過良好的編程，控制保存在cookie中的session對象的大小。
2.通過加密和安全傳輸技術(shù)（SSL），減少cookie被破解的可能性。
3.只在cookie中存放不敏感數(shù)據(jù)，即使被盜也不會有重大損失。
4.控制cookie的生命期，使之不會永遠(yuǎn)有效。偷盜者很可能拿到一個過期的cookie。

缺點(diǎn):

1.`Cookie`數(shù)量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。
2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補(bǔ)，因?yàn)閿r截者并不需要知道cookie的意義，他只要原樣轉(zhuǎn)發(fā)cookie就可以達(dá)到目的了。
3.有些狀態(tài)不可能保存在客戶端。例如，為了防止重復(fù)提交表單，我們需要在服務(wù)器端保存一個計(jì)數(shù)器。如果我們把這個計(jì)數(shù)器保存在客戶端，那么它起不到任何作用。

本地存儲一個會話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。
因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲

用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會過期的

Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去，這樣無形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用
cookie需要前端開發(fā)者自己封裝setCookie，getCookie

(1) link屬于HTML標(biāo)簽，而@import是CSS提供的; 
(2) 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3) import只在IE5以上才能識別，而link是HTML標(biāo)簽，無兼容問題; 
(4) link方式的樣式的權(quán)重 高于@import的權(quán)重.

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認(rèn)值是content-box

content-box：讓元素維持W3C的標(biāo)準(zhǔn)盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設(shè)置width/height屬性指的是content部分的寬/高

border-box：讓元素維持IE傳統(tǒng)盒模型（IE6以下版本和IE6~7的怪異模式）。設(shè)置width/height屬性指的是border + padding + content

摘自鏈接描述

級格式化上下文，是CSS中的一個渲染機(jī)制，BFC就相當(dāng)于一個盒子，內(nèi)部的元素與外界的元素互不干擾。它不會影響外部的布局，外部的布局也不會影響到它.

float的值不是none

position 的值不是static或者relative

display的值是inline-block,table-cell,flex,table-caption或者inline-flex

overflow的值不是visible

 - 內(nèi)部的BOX會在垂直方向上一個接一個的放置
 - 于同一個BFC的倆個相鄰的BOX的margin會發(fā)生重疊，與方向無關(guān)。
 - 每個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即使浮動元素也是如此
 - BFC的區(qū)域不會與float的元素區(qū)域重疊
 - 計(jì)算BFC的高度時，浮動子元素也參與計(jì)算
 - BFC就是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素，反之亦然

防止margin重疊：

要阻止margin重疊，只要將倆個元素別放在一個BFC中即可

浮動相關(guān)問題

使得父元素包含子元素，常見的方式是為父元素設(shè)置overflow：hidden或者浮動父元素。根本原因在于創(chuàng)建BFC的元素，子浮動元素也會參與其高度計(jì)算，即不會產(chǎn)生高度塌陷問題

多欄布局的一種方式

與浮動元素相鄰的已生成BFC的元素不能與浮動元素互相覆蓋。利用該特性可以作為多欄布局的一種實(shí)現(xiàn)方式.
特點(diǎn)在于左右倆欄的寬度固定，中間欄可以根據(jù)瀏覽器寬度自適應(yīng)

undefined是一個表示"無"的原始值，轉(zhuǎn)為數(shù)值時為NaN

變量被聲明了，但沒有賦值時，就等于undefined

調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined

對象沒有賦值的屬性，該屬性的值為undefined

函數(shù)沒有返回值時，默認(rèn)返回undefined

null是一個表示"無"的對象，轉(zhuǎn)為數(shù)值時為0

作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象

作為對象原型鏈的終點(diǎn)

document.write只能重繪整個頁面
innerHTML可以重繪頁面的一部分

原理

HTML5的離線存儲是基于一個新建的.appcache文件的緩存機(jī)制(不是存儲技術(shù))，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示

使用

在文檔的 html 標(biāo)簽設(shè)置 manifest 屬性，如 manifest="/offline.appcache"

在項(xiàng)目中新建 manifest 文件，manifest 文件的命名建議：xxx.appcache

在 web 服務(wù)器配置正確的 MIME-type，即 text/cache-manifest

inline-block配合text-align

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

table配合margin

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

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%);
}

水平居中

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

垂直居中

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

水平垂直居中

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