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

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

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

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

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

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

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

缺點(diǎn):

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

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

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

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

(1) link屬于HTML標(biāo)簽，而@import是CSS提供的; 
(2) 頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;
(3) import只在IE5以上才能識(shí)別，而link是HTML標(biāo)簽，無(wú)兼容問題; 
(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

摘自鏈接描述

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

float的值不是none

position 的值不是static或者relative

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

overflow的值不是visible

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

防止margin重疊：

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

浮動(dòng)相關(guān)問題

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

多欄布局的一種方式

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

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

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

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

對(duì)象沒有賦值的屬性，該屬性的值為undefined

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

null是一個(gè)表示"無(wú)"的對(duì)象，轉(zhuǎn)為數(shù)值時(shí)為0

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

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

document.write只能重繪整個(gè)頁(yè)面
innerHTML可以重繪頁(yè)面的一部分

原理

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

使用

在文檔的 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;
}