1、簡單介紹一下什麼是盒模型？

網頁上的每一個標籤都是一個盒子,每個盒子都有四個屬性：

內容（content）：盒子裡面裝的東西，網頁中通常是指文字和圖片（盒子中間裝的東西）；

填充（padding）：內邊距，比如買東西時怕盒子裡面的東西損壞而新增的泡沫或者其它抗震的輔料（盒子裡裝的東西和邊框的距離），填充只有寬度屬性，每個HTML標記都可以看作一個盒子；

邊框（border）：盒子本身（盒子的厚薄和顏色之分）；

邊界（margin）：外邊距（邊框外邊自動留白的空隙）；

這些屬性我們可以把它看做我們日常生活中的盒子來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，CSS盒子模型都具備這些屬性，所以叫它盒子模型。

2、position屬性四個值：static、relative、absolute和fixed的區別和用法？

(1)、static（靜態定位）：預設值；沒有定位，元素出現在正常的流中（忽略top、bottom、left、right或者z-index宣告）；

(2)、relative（相對定位）：生成相對的元素，定位為relative的元素脫離正常的文字流中，但其在文字流中的位置依然存在，它是預設參照父級的原始點為原始點，無父級則以文字流的順序在上一個元素的底部為原始點，通過top、bottom、left、right的設定相對於其正常（原先本身）位置進行定位，可以通過z-index進行層次分級；

(3)、absolute（絕對定位）：生成絕對定位的元素，相對於static定位以外的第一個父元素進行定位。元素的位置通過top、bottom、left、right屬性進行規定，可以通過z-index進行層次分級；

(4)、fixed（固定定位）：生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過top、bottom、left、right屬性進行規定，可以通過z-index進行層次分級；

3、HTML5新標籤和CSS3的新特性有哪些？移除了哪些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分HTML和HTML5？

(1)、HTML5新標籤：

新增的元素有繪畫 canvas ，用於媒介回放的 video 和 audio 元素。
內容元素，article、footer、header、nav、section。
表單控制元件，calendar、date、time、email、url、search。
控制元件元素，webworker, websockt, Geolocation。

section元素：表示頁面中的一個內容區塊，比如章節、頁首、頁尾/頁面；

article元素：頁面中一塊與上下文不相關的獨立內容，比如一篇文章；

aside元素：表示article元素內容之外的、與article元素內容相關的輔助資訊；

header元素：頁面中的標題或者一個內容區塊；

footer：頁面腳註；

nav元素：頁面中導航連線部分；

video：定義視訊

(2)、CSS3新特性：

css3實現圓角（border-radius）

陰影（box-shadow）

對文字加特效（text-shadow）

線性漸變（gradient）

旋轉（transform）：   transform：rotate（90deg）、 scale（0.5,0.8）、 translate（0px，-60px）、 skew（-90deg，0deg）；旋轉、縮放、定位、傾斜

增加了更多的css選擇器：比如 背景rgba；

在css3中引入一些偽元素： p:first-of-type 選擇屬於其父元素的收個<p>元素的每個<p>元素；

還有媒體查詢等等。

(3)、移除的元素：

顯現層元素：basefont，big，center，font, s，strike，tt，u。
效能較差元素：frame，frameset，noframes。

(4)、a.IE8/IE7/IE6支援通過document.方法產生的標籤，利用這一特性讓這些瀏覽器支援HTML5新標籤。

        b.使用是html5shim框架

區分：DOCTYPE宣告的方式是區分HTML和HTML5標誌的一個重要因素，此外，還可以根據新增的結構、功能元素來加以區分。
4、簡述你所知道的css單位，簡單描述一些？

% 百分比、em 自動適應使用者所使用的字型（1em=當前的字型尺寸，2em=當前字型尺寸的2倍，某元素以12pt顯示時，2em=24pt）、rem  媒體查詢、px  畫素（計算機螢幕上某一點）。

5、前端優化的方法？（兩部分）

(1)、面向內容的優化：圖片優化、css/js優化、壓縮css/js，減少http請求，減少DNS查詢、避免重定向，使用ajax快取，延遲載入元件，減少DOM元素數量等等；

(2)、面向server：縮小cookie，針對web元件使用域名無關性的。

6、$.get（）與$.post（）方法區別？

(1)、get請求是通過URL提交的，post是通過http訊息實體提交的；

(2)、get提交有大小限制（2KB）,post方法不受限制；

(3)、get方法會被快取下來，可能有安全性問題，post沒有這類問題；

(4)、get方式請求資料的效率相比post方式較高；

(5)、get方式通過$.get（）獲取，post（）方式通過$.post（）獲取。

7、瀏覽器本地儲存：

在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage，在html5中提供的localStorage來取代globalStorage。

html5中的web Storage包括了兩種儲存方式：sessionStorage和localStorage。

sessionStorage用於本地儲存一個會話（session）中的資料，這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也會隨之銷燬，因此sessionStorage不是一種持久化的本地儲存，僅僅是會話級別的儲存；

localStorage用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的；

web Storage和cookie的區別：

(1)、兩者概念相似，區別在於web Storage是為了更大容量儲存設計的，cookie大小受限制，當請求一個新的頁面的時候cookie都會被髮送過去，這樣無形中浪費了頻寬，而且cookie需要指定作用域，不可以跨域呼叫；

(2)、web Storage擁有setItem、getItem、removeItem、clear等方法，cookie需要前端開發者自己封裝setCookie、getCookie；

(3)、cookie是不可獲取的：cookie的作用是與伺服器進行互動，作為http規範的一部分而存在，而web Storage僅僅是為了在本地“儲存”資料而生；

(4)、localStorage和sessionStorage都具有相同的操作方法，例如;setItem、getItem和removeItem等。

cookie和session的區別：

(1)、cookie資料存放在客戶的瀏覽器上，session存放在伺服器上

(2)、coolie不是很安全，別人可以分析存放在本地的cookie進行cookie欺騙，考慮到安全性應該使用session

(3)、在減輕伺服器效能方面，cookie優先於session，session會在一定時間內儲存在伺服器上，當訪問量增多時會佔用伺服器效能

(4)、單個cookie儲存的資料不能超過4K，很多瀏覽器都限制一個站點最多儲存20個cookie

(5)、將登陸賬號、密碼等重要資訊存放在session，如果其他資訊需要保留，可以放在cookie中

8、CSS中display：none和visibility：hidden的區別？

display：none 隱藏對應的元素，位置不存在，其本身也不存在。

visibility：hidden 隱藏對應的元素，在文件佈局中仍保留原來的空間。

9、CSS中link和@import的區別？

(1)、link屬於HTML標籤，@import是CSS提供的；

(2)、頁面被載入時link會被同時載入，@import引用的css會等到頁面被載入完時再載入；

(3)、import只在IE5以上才能識別，link是HTML標籤，無相容問題；

(4)、link方式的樣式的權重高於@import的權重。

10、CSS選擇器有哪些？那些屬性可以繼承？優先順序演算法如何計算？CSS3新增偽類有哪些？

(1)、CSS選擇器：

id選擇器：#myId

類選擇器：.myclassname

標籤選擇器：div，p，h1

相鄰選擇器：div+p

子選擇器：ul>li

後代選擇器：li a

萬用字元選擇器：*

屬性選擇器：input[type="text"]

偽類選擇器：a：hover，li：nth-child

(2)、可繼承的樣式：font-size，font-family，color，text-indext

(3)、不可繼承的樣式：border，padding，margin，width，height

優先順序就近原則，同權重情況下樣式定義最為準，載入樣式以最後的定位為準：

優先順序：！important > id > class > tag 

                 important > 內聯 > id

(4)、CSS3新增偽類：

p：first-of-type 選擇屬於其父元素的首個<p>元素的每個<p>元素；

p：last-of-type 選擇屬於其父元素的最後<p>元素的每個<p>元素；

p：only-of-type 選擇屬於其父元素唯一的<p>元素的每個<p>元素；

p：only-child 選擇屬於其父元素的唯一子元素的每個<p>元素；

p：nth-child(2) 選擇屬於其父元素的第二個子元素的每個<p>元素；

：enabled ：disabled  控制表單控制元件的禁用狀態

：checked  單選框或複選框被選擇

11、浮動元素引起的問題和清除浮動的方法有哪些？

引起的問題：

(1)、父元素的高度無法撐開，影響與父元素同級的元素；

(2)、與浮動元素同級的非浮動元素（內聯元素）會跟隨其後；

(3)、若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。

清除浮動的方法：

(1)、使用css中的clear：both；屬性，給父元素新增clearfix樣式

.clearfix：after{content：“”；display：block；height：0；clear：both；visibility：hidden；}

.clearfix{display：inline-block；}/*for IE/Mac*/

(2)、給父級元素設定overflow：hidden；屬性

(3)、給父元素新增高度。

12、JQuery中Ajax請求是怎麼解決的？

(1)、ajax是一種綜合技術，利用XMLHttpRequest來獲取/傳送資料，利用js來操作DOM，利用html+css顯示渲染DOM，重新渲染區域性介面，利用非同步的方式和後臺進行交換資料，可以無重新整理的獲取/傳送資料。

(2)、缺點：

a、不同版本的瀏覽器對XMLHttpRequest物件支援度不足（如IE5之前）

b、前進、後退的功能被破壞

c、搜尋引擎的支援度不夠（搜尋引擎爬蟲還不能理解js引起變化資料的內容）

d、開發除錯工具缺乏（相對於其他語言的工具來說，js或ajax除錯開發很少）

(3)、非同步和同步：

a、使用ajax最關鍵的地方，就是實現非同步請求，接受響應及執行回撥

b、ajax使用同步模式屬於阻塞模式，會導致多條線路執行時又必須一條一條執行，會讓web出現假死狀態，所以，ajax大部分採用非同步模式

13、JQuery中Ajax處理跨域的三種方式：

(1)、代理

(2)、XHR2

(3)、jsonp（只支援get請求）

14、JQuery中事件繫結有幾種？

最常用的是bind、on（官方推薦用on，遵循專案規範）

15、阻止事件冒泡和阻止預設行為：

(1)、阻止事件冒泡：

IE：  cancelBubble       ====== 》  event.cancelBubble=true;

非IE： stopPropagation    

event.stopPropagation（）；在繫結事件中加入event引數，在函式中增加event

(2)、阻止預設行為：

IE： returnValue

非IE： preventDefault  

16、HTTP狀態碼：

100  Continue  繼續，一般在傳送post請求時，已傳送了http header之後服務端將返回此資訊，表示確認，之後傳送具體引數資訊
200  OK   正常返回資訊
201  Created  請求成功並且伺服器建立了新的資源
202  Accepted  伺服器已接受請求，但尚未處理
301  Moved Permanently  請求的網頁已永久移動到新位置。
302 Found  臨時性重定向。
303 See Other  臨時性重定向，且總是使用 GET 請求新的 URI。
304  Not Modified  自從上次請求後，請求的網頁未修改過。

400 Bad Request  伺服器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。
401 Unauthorized  請求未授權。
403 Forbidden  禁止訪問。
404 Not Found  找不到如何與 URI 相匹配的資源。

500 Internal Server Error  最常見的伺服器端錯誤。
503 Service Unavailable 伺服器端暫時無法處理請求（可能是過載或維護）。 繼續，一般在傳送post請求時，已傳送了http header之後服務端將返回此資訊，表示確認，之後傳送具體引數資訊
200  OK   正常返回資訊
201  Created  請求成功並且伺服器建立了新的資源
202  Accepted  伺服器已接受請求，但尚未處理
301  Moved Permanently  請求的網頁已永久移動到新位置。
302 Found  臨時性重定向。
303 See Other  臨時性重定向，且總是使用 GET 請求新的 URI。
304  Not Modified  自從上次請求後，請求的網頁未修改過。

400 Bad Request  伺服器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。
401 Unauthorized  請求未授權。
403 Forbidden  禁止訪問。
404 Not Found  找不到如何與 URI 相匹配的資源。

500 Internal Server Error  最常見的伺服器端錯誤。
503 Service Unavailable 伺服器端暫時無法處理請求（可能是過載或維護）。

17、ES6中let和const的區別：

let命令宣告變數，const命令宣告一個只讀的常量。

let的用法類似於var，但是所宣告的變數只在let命令所在的程式碼塊內有效。

const一旦宣告，常量的值就不能改變。

let宣告的變數、值和型別都可以改變，沒有限制，const宣告的變數不可以改變值。

18、如何實現三欄佈局（左右兩邊固定寬度，中間自適應）？

(1) 使用flex佈局： 父元素設定 display: flex，左右兩邊設定固定寬度，中間設定 flex-grow: 1；(flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。)
(2) 使用浮動佈局：左右兩邊設定固定寬度，而且分別設定 float:left和right，這個方法有一個需要注意的是在HTML中，中間欄需要和右邊欄進行對調；
(3) 使用絕對定位佈局：左右兩邊設定固定寬度和 position:absolute,而且分別設定 left: 0和 right: 0，中間欄只要設定左右margin為左右欄的寬度就可以了（需要注意的是左右兩邊需要設定 top: 0，不然右邊會被訂下來)。

效果圖：

19、js基本資料型別有哪些？

Undefined 、Null 、 Boolean 、 Number和String

其中Undefined 、Null 、 Boolean 、 Number都屬於基本型別。
Object、Array和Function則屬於引用型別，String有些特殊。

20、javascript 程式碼中的"use strict";是什麼意思 ?

use strict是一種ECMAscript 5 新增的（嚴格）執行模式，可以提高編譯器效率，增加執行速度。

注：測試IE6,7,8,9均不支援嚴格模式。

21、如何實現瀏覽器內多個標籤頁之間的通訊?

第一種——呼叫localStorage
第二種——呼叫cookie+setInterval()

(1) 第一種：在一個標籤頁裡面使用 localStorage.setItem(key,value)新增（修改、刪除）內容； 
在另一個標籤頁裡面監聽 storage 事件。 
即可得到 localstorge 儲存的值，實現不同標籤頁之間的通訊。

(2) 第二種：將要傳遞的資訊儲存在cookie中，每隔一定時間讀取cookie資訊，即可隨時獲取要傳遞的資訊。

22、== 和 === 的區別？

===為恆等符：當等號兩邊的值為相同型別的時候，直接比較等號兩邊的值，值相同則返回true，若等號兩邊的值型別不同時直接返回false。

==為等值符： 當等號兩邊的值為相同型別時比較值是否相同，型別不同時會發生型別的自動轉換，轉換為相同的型別後再作比較。
a、如果一個是null、一個是undefined，那麼[相等]。
b、如果一個是字串，一個是數值，把字串轉換成數值再進行比較。
c、如果任一值是 true，把它轉換成 1 再比較；如果任一值是 false，把它轉換成 0 再比較。
d、如果一個是物件，另一個是數值或字串，把物件轉換成基礎型別的值再比較。物件轉換成基礎型別，利用它的toString或者valueOf方法。 js核心內建類，會嘗試valueOf先於toString；例外的是Date，Date利用的是toString轉換。非js核心的物件，令說（比較麻 煩，我也不大懂）
e、任何其他組合，都[不相等]

23、30 == '30' 的過程是怎樣的?​​​​​​​

30為數值型別，而'30'為字串型別，因此等號兩邊的資料型別不相等，需要進行轉換型別；
由於一個是數值，另一個字串，所以需要將字串轉換成數值再進行比較，即 '30' => 30;
這時等號兩邊同樣為數值型資料，即 30 == 30，所以返回 true。

24、以下程式碼輸出的是什麼？為什麼呢？

for(var i=0; i<5; i++){
 setTimeout(function timer(){
 console.log(i); //輸出5個5
 },0);
}

原因如圖採用一個網友說的：

25、 $(document).ready()與 window.onload方法執行時間

$(document).ready()方法和window.onload方法有相似的功能，但是在執行時機方面是有區別的。

window.onload方法是子網頁中的所有元素（包括元素的所有關聯的檔案）完全載入到瀏覽器後才執行，即javascript此可以訪問網頁中的任何元素。而通過jquery中的$(document).ready()方法註冊的時間處理程式，在DOM完全就緒時就可以被呼叫。此時，網頁的所有元素對jquery而言都是可以訪問的。

26、知道如何修改this的指向嗎？

修改this指向的辦法有三種： apply、 call和 bind
apply、 call：通過傳入需要指向的物件，從而改變 this的指向，指向傳入的第一個引數;
bind：它會建立一個函式的例項，其this值會被繫結到傳給bind()函式的值。

window.color ='red';
var o ={ color:'blue'};
function sayColor(){
    console.log(this.color);
}
var globalSaycolor = sayColor;
var objectSaycolor = sayColor.bind(o);
globalSaycolor();// red
objectSaycolor();// blue

補充：

其實還有一種：new關鍵字改變this指向
因為在 new的過程中，其中有一個步驟為將建構函式內部的 this指向例項物件，所以通過 new關鍵字也可以改變 this的指向。