刷前端面經筆記（一）

1.CSS的盒子模型

包含元素內容content、內邊距padding、邊框border、外邊距margin
box-sizing:border-box;content-box;inherit;
1) content-box:總寬度=margin+border+padding+width，即爲標準模型；
2) border-box:總寬度=margin+width，即爲IE模型；
3) inherit:繼承父元素的border-sizing屬性。

2.AJAX的readyState幾種狀態

0——初始化
1——載入
2——載入完成
3——解析
4——完成

3.常見的post提交數據方式對應的content-type取值

4種
1)application/x-www-form-urlencoded:數據被編碼爲名稱/值對,這是標準的編碼格式。
2)multipart/form-data:數據被編碼爲一條消息，頁上的每一個控件對應消息中的一個部分。
3)application/json:告訴服務端消息主體是序列化後的 JSON 字符串.
4)text/xml

4.清除浮動的幾種方法

1)父級div定義僞類：after和zoom
`.clearfloat::after {display:block; clear:both; content:" "; visibility:hidden; height:0;}
.clearfloat {zoom:1}`
2)在結尾處添加空div標籤clear：both
3)父級div定義height
4)父級div定義display:table
5)父級div也一塊兒浮動
6)父級div定義overflow:auto/hidden（必須定義width或zoom:1，同時不能定義height，瀏覽器會自動檢查浮動區域的高度）

5.Webpack解析ES6用的插件

babel-loader

6.移動端上click事件在某些瀏覽器有沒有遇到延遲的問題

1)靜止縮放
<meta name="viewport" content="width=device-width user-scalable='no' "> 或
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
2)引入`fastclick.js
window.addEventListener(function(){

FastClick.attach(document.body);

1},false)`

7.HTTP的緩存機制

1)強制緩存：當所請求的數據在緩存數據庫中還沒有過時時，不與服務器進行交互，直接使用緩存數據庫中的數據。
Expire / Cache-Control
2)協商緩存：從緩存數據庫中取出緩存的標識，而後向瀏覽器發送請求驗證請求的數據是否已經更新，若是已更新則返回新的數據，若未更新則使用緩存數據庫中的緩存數據。
etag / last-modifield