閉包的理解
使用閉包主要是為了設(shè)計私有的方法和變量。
優(yōu)點是可以避免全局變量的污染，
缺點是閉包會常駐內(nèi)存，會增大內(nèi)存使用量脊串，使用不當很容易造成內(nèi)存泄露
Cookie
第一：每個特定的域名下最多生成20個 cookie
1.IE6或更低版本最多20個 cookie
2.IE7和之后的版本最后可以有50個 cookie。
3.Firefox 最多50個 cookie
4.chrome 和 Safari 沒有做硬性限制
第二：cookie 的最大大約為4096字節(jié)清钥，為了兼容性琼锋，一般不能超過4095字節(jié)
優(yōu)點:極高的擴展性和可用性
1.通過良好的編程，控制保存在 cookie 中的 session 對象的大小祟昭。
2.通過加密和安全傳輸技術(shù)（SSL）缕坎，減少cookie被破解的可能性。
3.只在 cookie 中存放不敏感數(shù)據(jù)篡悟，即使被盜也不會有重大損失谜叹。
4.控制 cookie 的生命期匾寝，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie荷腊。
缺點:
1.`Cookie` 數(shù)量和長度的限制艳悔。每個 domain 最多只能有20條cookie，每個 cookie 長度不能超過4KB女仰，否則會被截掉猜年。
2.安全性問題。如果 cookie 被人攔截了疾忍，那人就可以取得所有的 session 信息乔外。即使加密也與事無補，因為攔截者并不需要知道 cookie 的意義一罩，他只要原樣轉(zhuǎn)發(fā) cookie 就可以達到目的了袁稽。
3.有些狀態(tài)不可能保存在客戶端。例如擒抛，為了防止重復提交表單，我們需要在服務(wù)器端保存一個計數(shù)器补疑。如果我們把這個計數(shù)器保存在客戶端歧沪，那么它起不到任何作用。
瀏覽器本地存儲
sessionStorage
本地存儲一個會話 （session） 中的數(shù)據(jù)莲组，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結(jié)束后數(shù)據(jù)也隨之銷毀诊胞。
因此 sessionStorage 不是一種持久化的本地存儲，僅僅是會話級別的存儲
localStorage
用于持久化的本地存儲锹杈，除非主動刪除數(shù)據(jù)撵孤，否則數(shù)據(jù)是永遠不會過期的
web storage 和 cookie 的區(qū)別
Cookie 的大小是受限的，并且每次你請求一個新的頁面的時候 Cookie 都會被發(fā)送過去竭望，這樣無形中浪費了帶寬邪码，另外cookie還需要指定作用域，不可以跨域調(diào)用
cookie 需要前端開發(fā)者自己封裝 setCookie咬清， getCookie
link 和 @import 的區(qū)別是
(1) link 屬于 HTML 標簽闭专，而 @import 是 CSS 提供的;
(2) 頁面被加載的時，link會同時被加載旧烧，而 @import 引用的CSS會等到頁面被加載完再加載;
(3) import只在IE5以上才能識別影钉，而 link 是 HTML 標簽，無兼容問題;
(4) link方式的樣式的權(quán)重 高于 @import 的權(quán)重.
box-sizing 屬性
box-sizing 屬性主要用來控制元素的盒模型的解析模式掘剪。默認值是content-box
content-box： 讓元素維持 W3C 的標準盒模型平委。元素的寬度/高度由 border? +? padding? +? content 的寬度/高度決定，設(shè)置 width/height 屬性指的是content部分的寬/高
border-box：讓元素維持IE傳統(tǒng)盒模型（IE6以下版本和IE6~7的怪異模式）夺谁。設(shè)置 width/height 屬性指的是 border? +? padding? +? content
BFC 規(guī)范的理解
摘自鏈接描述
（https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context）
級格式化上下文廉赔，是CSS中的一個渲染機制肉微，BFC就相當于一個盒子，內(nèi)部的元素與外界的元素互不干擾昂勉。它不會影響外部的布局浪册，外部的布局也不會影響到它.
創(chuàng)建 BFC
float的值不是none
position 的值不是 static 或者 relative
display 的值是 inline-block, table-cell, flex, table-caption 或者 inline-flex
overflow 的值不是 visible
BFC 的特性
- 內(nèi)部的 BOX 會在垂直方向上一個接一個的放置
- 于同一個 BFC 的倆個相鄰的 BOX 的 margin 會發(fā)生重疊，與方向無關(guān)岗照。
- 每個元素的左外邊距與包含塊的左邊界相接觸（從左到右）村象，即使浮動元素也是如此
- BFC 的區(qū)域不會與 float 的元素區(qū)域重疊
- 計算 BFC 的高度時，浮動子元素也參與計算
- BFC就是頁面上的一個隔離的獨立容器攒至，容器里面的子元素不會影響到外面的元素厚者，反之亦然
BFC 在布局中的應(yīng)用
防止 margin 重疊：
要阻止 margin 重疊，只要將倆個元素別放在一個BFC中即可
浮動相關(guān)問題
使得父元素包含子元素迫吐，常見的方式是為父元素設(shè)置overflow：hidden或者浮動父元素库菲。根本原因在于創(chuàng)建 BFC 的元素，子浮動元素也會參與其高度計算志膀，即不會產(chǎn)生高度塌陷問題
多欄布局的一種方式
與浮動元素相鄰的已生成 BFC 的元素不能與浮動元素互相覆蓋熙宇。利用該特性可以作為多欄布局的一種實現(xiàn)方式.
特點在于左右倆欄的寬度固定，中間欄可以根據(jù)瀏覽器寬度自適應(yīng)
null和undefined的區(qū)別
undefined
undefined 是一個表示”無”的原始值溉浙，轉(zhuǎn)為數(shù)值時為 NaN
變量被聲明了烫止，但沒有賦值時，就等于 undefined
調(diào)用函數(shù)時戳稽，應(yīng)該提供的參數(shù)沒有提供馆蠕，該參數(shù)等于 undefined
對象沒有賦值的屬性，該屬性的值為 undefined
函數(shù)沒有返回值時惊奇，默認返回 undefined
null
null 是一個表示”無”的對象互躬，轉(zhuǎn)為數(shù)值時為0
作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象
作為對象原型鏈的終點
documen.write 和 innerHTML 的區(qū)別
document.write 只能重繪整個頁面
innerHTML 可以重繪頁面的一部分
HTML5的離線存儲
原理
HTML5 的離線存儲是基于一個新建的 .appcache 文件的緩存機制(不是存儲技術(shù))颂郎，通過這個文件上的解析清單離線存儲資源吼渡，這些資源就會像cookie 一樣被存儲了下來。之后當網(wǎng)絡(luò)在處于離線狀態(tài)下時祖秒，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示
使用
在文檔的 html 標簽設(shè)置 manifest 屬性诞吱，如 manifest=”/offline.appcache”
在項目中新建 manifest 文件，manifest 文件的命名建議：xxx.appcache
在 web 服務(wù)器配置正確的 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;
}
