刷前端面經筆記（一）

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.jswindow.addEventListener(function(){ FastClick.attach(document.body); 1},false)

7.HTTP的緩存機制

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