web面試題
js實現瀏覽器快取清除：
①meta方法：
//不快取
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
②清理form表單的臨時快取：
<body onLoad="javascript:document.yourFormName.reset()">
③jquery ajax清除瀏覽器快取：
方式一：用ajax請求伺服器最新檔案，並加上請求頭If-Modified-Since和Cache-Control,如下:
$.ajax({
url:'www.haorooms.com',
dataType:'json',
data:{},
beforeSend :function(xmlHttp){
xmlHttp.setRequestHeader("If-Modified-Since","0");
xmlHttp.setRequestHeader("Cache-Control","no-cache");
},
success:function(response){
//操作
}
async:false
});
方法二，直接用cache:false,
$.ajax({
url:'www.haorooms.com',
dataType:'json',
data:{},
cache:false,
ifModified :true ,
success:function(response){
//操作
}
async:false
});
方法三：用隨機數，隨機數也是避免快取的一種很不錯的方法！
URL 引數後加上 "?ran=" + Math.random(); //當然這裡引數 ran可以任意取了
1.什麼是盒子模型？
css盒子模型 又稱框模型 ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。
元素的實際寬度：左外邊距 + 左邊框 + 左內邊距 + 內容區域(width) + 右內邊距 + 右邊框 + 右外邊距
2.行內元素有哪些？塊級元素有哪些？空（void）元素有哪些？
行內：span a - 錨點 b - 粗體 img - 圖片 input - 輸入框 i - 斜體 abbr - 縮寫 select
塊級：div h1_h6 ul li ol p table - 表格 dl dt dd
空元素： <br> <hr> <img> <input> <link> <meta>
3.css實現垂直水平居中
4.簡述一下src和href的區別
href標識超文字引用，用在link和a等元素上，href是引用和頁面關聯，是在當前元素和引用資源之間建立聯絡
src表示引用資源，表示替換當前元素，用在img，script，iframe上，src是頁面內容不可缺少的一部分。
5.link和@import的區別
兩者都是外部引用CSS的方式，但是存在一定的區別：
區別1：link是XHTML標籤，除了載入CSS外，還可以定義RSS等其他事務；@import屬於CSS範疇，只能載入CSS。
區別2：link引用CSS時，在頁面載入時同時載入；@import需要頁面網頁完全載入以後載入。
區別3：link是XHTML標籤，無相容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支援。
區別4：ink支援使用Javascript控制DOM去改變樣式；而@import不支援。
6.什麼是css Hack？
css hack指各版本及各品牌瀏覽器之間對CSS解釋後出現網頁內容的誤差(比如我們常說錯位)的處理
CSS hack是通過在CSS樣式中加入一些特殊的符號，讓不同的瀏覽器識別不同的符號
7.簡述同步和非同步的區別？
同步互動：客戶端向伺服器端傳送請求,到伺服器端向客戶端進行響應,這個過程中,使用者不能做任何其他事情的
非同步互動：客戶端向伺服器端傳送請求,到伺服器端向客戶端進行響應,這個過程中,使用者可以左任何其他事情的
8.px和em的區別
px表示畫素 (計算機螢幕上的一個點：1px = 1/96in)，是絕對單位 ，不會因為其他元素的尺寸變化而變化。
em表示相對於父元素的字型大小。em是相對單位 ，沒有一個固定的度量值，而是由其他元素尺寸來決定的相對值。
9.什麼叫優雅降級（平穩退化）和漸進增強，
優雅降級：一開始就構建站點的完整功能，然後針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構建了一個應用，然後逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。
漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果，互動等改進和追加功能達到更好的使用者體驗。
10.瀏覽器的核心分別是什麼？注意事項？
IE:trident核心
Firefox：gecko核心
safari：webkit核心
opera：以前是presto核心，現在改用google chrome的Blink核心
Chrome：Blink（基於webkit，google與opera software共同開發）
11.怎麼新增、移除、移動、複製、建立和查詢節點
（1）建立新節點
createDocumentFragment() //建立一個DOM片段
createElement() //建立一個具體的元素
createTextNode() //建立一個文字節點
（2）新增、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
（3）查詢
getElementsByTagName() //通過標籤名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性
12.消除arr1=[1,2,2,2,23,4,5,4,6,6,8]數組裡重複的元素
var arr=[1,2,2,2,23,4,5,4,6,6,8].sort((a,b) => a-b);
var new_arr=[];
for(var i=0;i<arr.length;i++) {
var items=arr[i];
//判斷元素是否存在於new_arr中，如果不存在則插入到new_arr的最後
if($.inArray(items,new_arr)==-1) {
new_arr.push(items);
}
}
console.log(new_arr); //[1, 2, 4, 5, 6, 8, 23]
14.webSocket是什麼及特點？
Websocket其實是一個新協議，跟HTTP協議基本沒有關係，只是為了相容現有瀏覽器的握手規範.
基於TCP/IP協議實現
是一種全雙向的通訊, 具有底層socket的特點
節約頻寬，節省伺服器資源
是HTML5的技術之一，具有巨大的應用前景
15.css選擇器有哪些？特點？
①標籤選擇器（如：body,div,p,ul,li）
②類選擇器（如：class="head",class="head_logo"）
③ID選擇器（如：id="name",id="name_txt"）
④全域性選擇器（如：*號）
⑤組合選擇器（如：.head .head_logo,注意兩選擇器用空格鍵分開）
⑥繼承選擇器（如：div p,注意兩選擇器用空格鍵分開）
⑦偽類選擇器（如：就是連結樣式,a元素的偽類，4種不同的狀態：link、visited、active、hover。）
⑧字串匹配的屬性選擇符(^ $ *三種，分別對應開始、結尾、包含)
16.HTML5標準提供了哪些新的API？
getElementsByClassName()方法
多媒體：video、audio、
遊戲：canvas、webgl、
儲存：localstorage、sessonstorage、websql、indexedDB
網路：websocket
17.談談對MVC、MVVM的理解？
MVC：是一種Web架構的模式。特點：把業務邏輯、模型資料、使用者介面分離開來，讓開發者將資料與表現解耦。
MVC三要素：Model（資料模型）、View（檢視）、Contorller（控制器）
MVVM：是一種基於前端開發的架構模式。核心是提供對View 和 ViewModel 的雙向資料繫結，View和Model之間並沒有直接的聯絡，而是通過ViewModel進行互動，View的變動，自動反映在ViewModel上，反之亦然，這樣就保證檢視和資料的一致性。
MVVM：View UI佈局，展示資料、Model 管理資料、Controller 響應使用者操作，並將 Model 更新到 View 上
18.跨域請求資源的方法有哪些？
（1）JSONP（jsonp 跨域 get 請求） ：這種方式主要是通過動態插入一個script標籤。瀏覽器對script的資源引用沒有同源限制，同時資源載入到頁面後會立即執行（沒有阻塞的情況下）。
（2）proxy 代理：這種方式首先將請求傳送給後臺伺服器，通過伺服器來發送請求，然後將請求的結果傳遞給前端。
（3）cors：這是現代瀏覽器支援跨域資源請求的一種方式。
（4）XDR：這是IE8、IE9提供的一種跨域解決方案，功能較弱只支援get跟post請求，而且對於協議不同的跨域是無能為力的，比如在http協議下發送https請求。
二、嚴格模式與混雜模式如何區分？它們有何意義？
嚴格模式：又稱標準模式，是指瀏覽器按照 W3C 標準解析程式碼。
混雜模式：又稱怪異模式或相容模式，是指瀏覽器用自己的方式解析程式碼。
如何區分：瀏覽器解析時到底使用嚴格模式還是混雜模式，與網頁中的 DTD 直接相關。
HTML:
1. 說下行內元素和塊級元素的區別？行內塊元素的相容性使用？（IE8 以下）
(1)行內元素：會在水平方向排列，不能包含塊級元素，設定width無效，height無效(可以設定line-height)，margin上下無效，padding上下無效。
塊級元素：各佔據一行，垂直方向排列。從新行開始結束接著一個斷行。
(2)相容性：display:inline-block;*display:inline;*zoom:1;
2.HTML5 為什麼只需要寫 <!DOCTYPE HTML>？
HTML5不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）。
而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別。
3.你知道多少種Doctype文件型別？
該標籤可宣告三種 DTD 型別，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文件。 HTML 4.01規定了三種文件型別：Strict、Transitional 以及 Frameset。
XHTML 1.0規定了三種 XML 文件型別：Strict、Transitional 以及 Frameset。
Standards（標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks
（包容）模式（也就是鬆散呈現模式或者相容模式）用於呈現為傳統瀏覽器而設計的網頁。
4.Doctype作用？標準模式與相容模式各有什麼區別?
(1)<!DOCTYPE>告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。
(2)標準模式的排版和JS運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
5.嚴格模式和混雜模式的區分，以及如何觸發這2種模式?
嚴格模式就是瀏覽器根據web標準去解析頁面，是一種要求嚴格的DTD，不允許使用任何表現層的語法，如
混雜模式是一種向後相容的解析方法。
觸發標準模式或者說嚴格模式很簡單，就是Html前申明正確的DTD，出發混雜模式可以在html文件開始不宣告DTD，或者在DOCTYPE前加入XML宣告(DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。)
6.說說嚴格模式的限制
嚴格模式主要有以下限制：
變數必須聲明後再使用 函式的引數不能有同名屬性，否則報錯 不能使用with語句 不能對只讀屬性賦值，否則報錯 不能使用字首0表示八進位制數，否則報錯 不能刪除不可刪除的屬性，否則報錯 不能刪除變數delete prop，會報錯，只能刪除屬性delete global[prop] eval不會在它的外層作用域引入變數
eval和arguments不能被重新賦值
arguments不會自動反映函式引數的變化
不能使用arguments.callee 不能使用arguments.caller 禁止this指向全域性物件 不能使用fn.caller和fn.arguments獲取函式呼叫的堆疊 增加了保留字（比如protected、static和interface） 7.設立”嚴格模式”的目的，主要有以下幾個：
消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
消除程式碼執行的一些不安全之處，保證程式碼執行的安全；
提高編譯器效率，增加執行速度；
為未來新版本的Javascript做好鋪墊。
注：經過測試IE6,7,8,9均不支援嚴格模式。
8.頁面匯入樣式時，使用link和@import有什麼區別？
（1）link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS, 定義rel連線屬性等作用；而@import是CSS提供的，只能用於載入CSS;
（2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題;
9.html5有哪些新特性？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？
（Q1）
HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。
(1)繪畫 canvas;
(2)用於媒介回放的 video 和 audio 元素;
(3)本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失;
(4)sessionStorage 的資料在瀏覽器關閉後自動刪除;
(5)語意化更好的內容元素，比如 article、footer、header、nav、section;
(6)表單控制元件，calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
(Q2)
IE8/IE7/IE6支援通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支援HTML5新標籤，
瀏覽器支援新標籤後，還需要新增標籤預設的樣式。
當然也可以直接使用成熟的框架、比如html5shim;
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
10.簡述一下你對HTML語義化的理解？
用正確的標籤做正確的事情。
(1)html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;
(2) 即使在沒有樣式CSS情況下也以一種文件格式顯示，並且是容易閱讀的;
(3) 搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
(4) 使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
11.Html和xhtml有什麼區別?
html是一種基本的web網頁設計語言，xhtml是一個基於XML的置標語言。
最主要的不同:
XHTML元素必須正確的被巢狀，元素必須關閉，標籤必須小寫，必須有根元素。
12.行內元素有哪些?塊級元素有哪些?CSS盒模型
行內元素: br span input a
塊級元素IV P H1 H2 FORM ul
CSS盒模型內容:padding border margin
13.iframe有那些缺點？
iframe會阻塞主頁面的Onload事件；
搜尋引擎的檢索程式無法解讀這種頁面，不利於SEO;
iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe新增src屬性值，這樣可以繞開以上兩個問題。
14.<strong>，<em>和<b>，<i>標籤
<strong> 標籤和 <em> 標籤一樣，用於強調文字，但它強調的程度更強一些。
em 是 斜體強調標籤，更強烈強調，表示內容的強調點。相當於html元素中的 <i>...</i>;
< b > < i >是視覺要素，分別表示無意義的加粗，無意義的斜體。
em 和 strong 是表達要素(phrase elements)。
CSS:
行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img
1.清除浮動有哪些方式？比較好的方式是哪一種？
(Q1)
（1）父級div定義height。
（2）結尾處加空div標籤clear:both。
（3）父級div定義偽類:after和zoom。
（4）父級div定義overflow:hidden。
（5）父級div定義overflow:auto。
（6）父級div也浮動，需要定義寬度。
（7）父級div定義display:table。
（8）結尾處加br標籤clear:both。
(9)使用空標籤清除浮動。
這種方法是在所有浮動標籤後面新增一個空標籤 定義css clear:both. 弊端就是增加了無意義標籤。（10）使用overflow。給包含浮動元素的父標籤新增css屬性 overflow:auto; zoom:1; zoom:1用於相容IE6。
(Q2)比較好的是第3種方式，好多網站都這麼用。
2.box-sizing常用的屬性有哪些？分別有什麼作用？ (Q1)box-sizing: content-box|border-box|inherit; (Q2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框(元素 預設效果)。 border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬 度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
3.介紹一下box-sizing屬性？
box-sizing屬性主要用來控制元素的盒模型的解析模式。預設值是content-box。
content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設定width/height屬性指的是content部分的寬/高
border-box：讓元素維持IE傳統盒模型（IE6以下版本和IE6~7的怪異模式）。設定width/height屬性指的是border + padding + content
標準瀏覽器下，按照W3C規範對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的佈局。
4.CSS3中新增了一種盒模型計算方式：box-sizing。盒模型預設的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計算元素寬高的區別如下：
content-box（預設）
佈局所佔寬度Width：
Width = width + padding-left + padding-right + border-left + border-right
佈局所佔高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom
padding-box
佈局所佔寬度Width：
Width = width(包含padding-left + padding-right) + border-top + border-bottom
佈局所佔高度Height:
Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
border-box
佈局所佔寬度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
佈局所佔高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
5.介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？
（1）有兩種， IE 盒子模型、W3C 盒子模型。
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)。
（3）區 別： IE的content部分把 border 和 padding計算了進去。
什麼是盒子模型？
在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。
6.IE 8以下版本的瀏覽器中的盒模型有什麼不同？
IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框
7.css引入的方式有哪些?link和@import的區別?
引入方式3種：行內新增定義style屬性值，頁面頭部內內嵌呼叫和外鏈呼叫，
區別：
1.link是xhtml標籤，除了載入css外，還可以定義RSS等其他事務，@import只能載入CSS
2.link引用CSS時候，頁面載入的時候同時載入，@import需要頁面網頁完全載入後加載
3.link是XHTML標籤，沒有相容問題，@import是在CSS2.1提出的，低版本的瀏覽器不支援。
4.link支援使用javascript控制DOM去改變樣式，但是@import不支援。
8.CSS選擇符有哪些? 哪些屬性可以繼承？優先順序演算法如何計算?內聯和Important哪個優先順序高？
1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.後代選擇器（li a）
7.萬用字元選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a: hover, li:nth-child）
important 比 內聯優先順序高,但內聯比 id 要高
9.img標籤上的title和alt屬性區別是什麼?
alt是當圖片不能正常顯示的時候，用文字代替
title該屬性提供資訊
10.display:none和visibility:hidden的區別？
diplay:none 隱藏對應的元素，在文件佈局中不再給它分配空間，它各邊的元素會合攏，就當他從來不存在。
visibility:hidden 隱藏對應的元素，但是在文件佈局中仍保留原來的空間。
11.position的值? relative和absolute分別是相對於誰進行定位的？
(1)absolute :生成絕對定位的元素， 相對於最近一級的 定位不是 static 的父元素來進行定位。
(2)fixed （老IE不支援）生成絕對定位的元素，通常相對於瀏覽器視窗或 frame 進行定位。
(3)relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。
(4)static 預設值。沒有定位，元素出現在正常的流中
(5)sticky 生成粘性定位的元素，容器的位置根據正常文件流計算得出
12.position:absolute和float屬性的異同
共同點：對內聯元素設定float和absolute屬性，可以讓元素脫離文件流，並且可以設定其寬高。
不同點：float仍會佔據位置，absolute會覆蓋文件流中的其他元素。
13.如何在頁面上實現一個圓形的可點選區域？
（1）map+area或者svg
（2）border-radius
（3）純js實現 需要求一個點在不在圓上簡單演算法、獲取滑鼠座標等等
14.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 單選框或複選框被選中。
15.css3有哪些新特性？
CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增加了更多的CSS選擇器 多背景 rgba在CSS3中唯一引入的偽元素是::selection.媒體查詢，多欄佈局border-image16.常見相容性問題？
(1)png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.也可以引用一段指令碼處理.
(2)瀏覽器預設的margin和padding不同。解決方案是加一個全域性的*{margin:0;padding:0;}來統一。
(3)IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大。
(4)浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設定了浮動，同時又設定了margin-left或margin-right，margin值會加倍。）
(5)#box{ float:left; width:10px; margin:0 0 0 100px;}這種情況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)漸進識別的方式，從總體中逐漸排除區域性。首先，巧妙的使用“\9”這一標記，將IE遊覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。 css .bb{/*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}怪異模式問題：漏寫DTD宣告，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD宣告的好習慣。現在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`17.上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。
解決方法，養成良好的程式碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。
18.display有哪些值？說明他們的作用。
block 塊型別。預設寬度為父元素寬度，可設定寬高，換行顯示。
none 預設值。象行內元素型別一樣顯示。
inline 行內元素型別。預設寬度為內容寬度，不可設定寬高，同行顯示。
inline-block 預設寬度為內容寬度，可以設定寬高，同行顯示。
list-item 象塊型別元素一樣顯示，並新增樣式列表標記。
table 此元素會作為塊級表格來顯示。
inherit 規定應該從父元素繼承 display 屬性的值。
19.CSS居中（包括水平居中和垂直居中）
內聯元素居中方案
水平居中設定：
1.行內元素
設定 text-align:center；
2.Flex佈局
設定display:flex;justify-content:center;(靈活運用,支援Chroime，Firefox，IE9+)
垂直居中設定：
1.父元素高度確定的單行文字（內聯元素）
設定 height = line-height；
2.父元素高度確定的多行文字（內聯元素）
a:插入 table （插入方法和水平居中一樣），然後設定 vertical-align:middle；
b:先設定 display:table-cell 再設定 vertical-align:middle；
塊級元素居中方案
水平居中設定：
1.定寬塊狀元素
設定 左右 margin 值為 auto；
2.不定寬塊狀元素
a:在元素外加入 table 標籤（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，然後設定 margin 的值為 auto；
b:給該元素設定 displa:inine 方法；
c:父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left:50%；
垂直居中設定：
使用position:absolute（fixed）,設定left、top、margin-left、margin-top的屬性;
利用position:fixed（absolute）屬性，margin:auto這個必須不要忘記了;
利用display:table-cell屬性使內容垂直居中;
使用css3的新屬性transform:translate(x,y)屬性;
使用:before元素;
CSS實現垂直水平居中案例：
一道經典的問題，實現方法有很多種，以下是其中一種實現：
HTML結構：
<div class="wrapper"> <div class="content"></div> </div>
CSS：
.wrapper { position: relative; width: 500px; height: 500px; background-color: #ddd; } .content{ background-color:#6699FF; width:200px; height:200px; position: absolute; //父元素需要相對定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的height，width margin-left: -100px; }
20.在書寫高效 CSS 時會有哪些問題需要考慮？
reset。參照上題“描述下 “reset” CSS 檔案的作用和使用它的好處”的答案。
規範命名。尤其對於沒有語義化的html標籤，例如div，所賦予的class值要特別注意。
抽取可重用的部件，注意層疊樣式表的“優先順序”。
21.為什麼要使用CSS sprites
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background-position”的組合進行背景定位，這樣可以減少很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以併發，但是如果請求太多會給伺服器增加很大的壓力。
22.簡述一下src與href的區別
href 是指向網路資源所在位置，建立和當前元素（錨點）或當前文件（連結）之間的連結，用於超連結。
src是指向外部資源的位置，指向的內容將會嵌入到文件中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文件內，例如js指令碼，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是為什麼將js指令碼放在底部而不是頭部。
23.什麼是CSS Hack?
一般來說是針對不同的瀏覽器寫不同的CSS,就是 CSS Hack。
IE瀏覽器Hack一般又分為三種，條件Hack、屬性級Hack、選擇符Hack（詳細參考CSS文件：css文件）。例如：
// 1、條件Hack <!--[if IE]> <style> .test{color:red;} </style> <![endif]-->
// 2、屬性Hack .test{ color:#090\9; /* For IE8+ */ *color:#f00; /* For IE7 and earlier */ _color:#ff0; /* For IE6 and earlier */ }
// 3、選擇符Hack * html .test{color:#090;} /* For IE6 and earlier */ * + html .test{color:#ff0;} /* For IE7 */
24.px和em的區別
px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，並且em會繼承父級元素的字型大小。
瀏覽器的預設字型高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em
JS:
1. 介紹js的基本資料型別
Undefined、Null、Boolean、Number、String
資料型別：2大類：*原始型別*的值和*引用型別*的物件
原始型別：值直接儲存在變數本地的型別（值為一個，而且不能特別複雜）
原始型別5類：Number String Boolean undefined null
引用型別：值沒有直接儲存在變數本地的型別
變數中只儲存指向實際資料所在位置的地址值
2.js有哪些內建物件？
資料封裝類物件：Object、Array、Boolean、Number 和 String
其他物件：Function、Arguments、Math、Date、RegExp、Error
3.this物件的理解
this總是指向函式的直接呼叫者（而非間接呼叫者）；
如果有new關鍵字，this指向new出來的那個物件；
在事件中，this指向觸發這個事件的物件，特殊的是，IE中的attachEvent中的this總是指向全域性物件Window；
4.談談This物件的理解。
this是js的一個關鍵字，隨著函式使用場合不同，this的值會發生變化。
但是有一個總原則，那就是this指的是呼叫函式的那個物件。
this一般情況下：是全域性物件Global。 作為方法呼叫，那麼this就是指這個物件
5.eval是做什麼的？
它的功能是把對應的字串解析成JS程式碼並執行；
應該避免使用eval，不安全，非常耗效能（2次，一次解析成js語句，一次執行）。
由JSON字串轉換為JSON物件的時候可以用eval，var obj =eval('('+ str +')');
6.JavaScript的typeof返回哪些資料型別
Ｏbject number function boolean underfind;
7.例舉3種強制型別轉換和2種隱式型別轉換?
強制（parseInt,parseFloat,number）隱式（== – ===）；
8.split() join() 的區別
前者是切割成陣列的形式，後者是將陣列轉換成字串
9.陣列方法pop() push() unshift() shift()
Push()尾部新增 pop()尾部刪除
Unshift()頭部新增 shift()頭部刪除
10.IE和DOM事件流的區別
執行順序不一樣、
引數不一樣
事件加不加on
this指向問題
11.IE和標準下有哪些相容性的寫法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
12.”==”和“===”的不同
前者會自動轉換型別，後者不會
13.DOM怎樣新增、移除、移動、複製、建立和查詢節點
// 建立新節點
createDocumentFragment() //建立一個DOM片段
createElement() //建立一個具體的元素
createTextNode() //建立一個文字節點
// 新增、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節點前插入一個新的子節點
// 查詢
getElementsByTagName() //通過標籤名稱
getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組，其中包括id等於name值的)
getElementById() //通過元素Id，唯一性
14.null和undefined的區別？
null是一個表示"無"的物件，轉為數值時為0；undefined是一個表示"無"的原始值，轉為數值時為NaN。
undefined：
（1）變數被聲明瞭，但沒有賦值時，就等於undefined。
（2) 呼叫函式時，應該提供的引數沒有提供，該引數等於undefined。
（3）物件沒有賦值的屬性，該屬性的值為undefined。
（4）函式沒有返回值時，預設返回undefined。
null：
（1） 作為函式的引數，表示該函式的引數不是物件。
（2） 作為物件原型鏈的終點。
15.new操作符具體幹了什麼呢?
（1）建立一個空物件，並且 this 變數引用該物件，同時還繼承了該函式的原型。
（2）屬性和方法被加入到 this 引用的物件中。
（3）新建立的物件由 this 所引用，並且最後隱式的返回 this 。
16.js延遲載入的方式有哪些？
defer和async、動態建立DOM方式（建立script，插入到DOM中，載入完畢後callBack）、按需非同步載入js17.call() 和 apply() 的區別和作用？
call vs apply: 都是：在呼叫方法時，修改當前呼叫方法的物件
差別：傳入引數的形式：
xxx.call(obj,值1,值2,值3....)
xxx.apply(obj,[值1,值2,值3....])
apply()函式有兩個引數：第一個引數是上下文，第二個引數是引數組成的陣列。如果上下文是null，則使用全域性物件代替。 如：function.apply(this,[1,2,3]); call()的第一個引數是上下文，後續是例項傳入的引數序列。 如：function.call(this,1,2,3);
詳解：
call方法:
語法：call(thisObj，Object)
定義：呼叫一個物件的一個方法，以另一個物件替換當前物件。
說明：
call 方法可以用來代替另一個物件呼叫一個方法。call 方法可將一個函式的物件上下文從初始的上下文改變為由 thisObj 指定的新物件。
如果沒有提供 thisObj 引數，那麼 Global 物件被用作 thisObj。
apply方法：
語法：apply(thisObj，[argArray])
定義：應用某一物件的一個方法，用另一個物件替換當前物件。
說明：
如果 argArray 不是一個有效的陣列或者不是 arguments 物件，那麼將導致一個 TypeError。
如果沒有提供 argArray 和 thisObj 任何一個引數，那麼 Global 物件將被用作 thisObj， 並且無法被傳遞任何引數。
18.什麼是閉包？
閉包：反覆使用區域性變數，且保證區域性變數不被汙染的結構
何時使用：希望反覆使用區域性變數，且保證不被汙染時
缺點：比普通函式佔用更多的記憶體空間(外層函式的AO)
如何建立：3步：
1. 外層函式封裝受保護的區域性變數
2. 外層函式，返回一個操作受保護的區域性變數的內層函式物件
3. 全域性由變數呼叫並儲存了外層函式返回的內層函式物件
結果：只有內層函式有權操作受保護的區域性變數
19.說說你對閉包的理解
使用閉包主要是為了設計私有的方法和變數。閉包的優點是可以避免全域性變數的汙染，缺點是閉包會常駐記憶體，會增大記憶體使用量，使用不當很容易造成記憶體洩露。在js中，函式即閉包，只有函式才會產生作用域的概念
20.閉包有三個特性：
1.函式巢狀函式
2.內層函式必須使用了外層函式的區域性變數
3.外層函式將內層函式返回到外部，可在外部呼叫
判斷閉包輸出結果：
1. 找首保護的區域性變數
2. 外層函式被呼叫幾次，就建立了幾個受保護的變數副本。
3. 同一次外層函式呼叫返回的內層函式，總使用統一個區域性變數
21.棧和佇列的區別?
棧的插入和刪除操作都是在一端進行的，而佇列的操作卻是在兩端進行的。佇列先進先出，棧先進後出。棧只允許在表尾一端進行插入和刪除，而佇列只允許在表尾一端進行插入，在表頭一端進行刪除22.棧和堆的區別？
棧區（stack）— 由編譯器自動分配釋放 ，存放函式的引數值，區域性變數的值等。堆區（heap） — 一般由程式設計師分配釋放， 若程式設計師不釋放，程式結束時可能由OS回收。堆（資料結構）：堆可以被看成是一棵樹，如：堆排序；棧（資料結構）：一種先進後出的資料結構。23.defer和async
defer並行載入js檔案，會按照頁面上script標籤的順序執行
async並行載入js檔案，下載完成立即執行，不會按照頁面上script標籤的順序執行
24.document.write()的用法
document.write()方法可以用在兩個方面：頁面載入過程中用實時指令碼建立頁面內容，以及用延時指令碼建立本視窗或新視窗的內容。
document.write只能重繪整個頁面。innerHTML可以重繪頁面的一部分
25.git fetch和git pull的區別
git pull：相當於是從遠端獲取最新版本並merge到本地
git fetch：相當於是從遠端獲取最新版本到本地，不會自動merge
26.attribute和property的區別是什麼？
attribute是dom元素在文件中作為html標籤擁有的屬性；
property就是dom元素在js中作為物件擁有的屬性。
所以：
對於html的標準屬性來說，attribute和property是同步的，是會自動更新的，
但是對於自定義的屬性來說，他們是不同步的，
27.請解釋一下 JavaScript 的同源策略。
概念:同源策略是客戶端指令碼（尤其是Javascript）的重要的安全度量標準。它最早出自Netscape Navigator2.0，其目的是防止某個文件或指令碼從多個不同源裝載。
這裡的同源策略指的是：協議，域名，埠相同，同源策略是一種安全協議。
指一段指令碼只能讀取來自同一來源的視窗和文件的屬性。
說一下什麼是JavaScript的同源策略？
一段指令碼只能讀取來自於同一來源的視窗和文件的屬性，這裡的同一來源指的是主機名、協議和埠號的組合程式碼相關的問題。
28.為什麼要有同源限制？
我們舉例說明：比如一個黑客程式，他利用Iframe把真正的銀行登入頁面嵌到他的頁面上，當你使用真實的使用者名稱，密碼登入時，他的頁面就可以通過Javascript讀取到你的表單中input中的內容，這樣使用者名稱，密碼就輕鬆到手了。
缺點：
現在網站的JS 都會進行壓縮，一些檔案用了嚴格模式，而另一些沒有。這時這些本來是嚴格模式的檔案，被 merge 後，這個串就到了檔案的中間，不僅沒有指示嚴格模式，反而在壓縮後浪費了位元組。
29.事件、IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？
1.我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點選一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行為。
2.事件處理機制：IE是事件冒泡、firefox同時支援兩種事件模型，也就是：捕獲型事件和冒泡型事件。
3. `ev.stopPropagation()`;注意舊ie的方法 `ev.cancelBubble = true`;
30.事件委託是什麼
讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！
31.請解釋什麼是事件代理
事件代理（Event Delegation），又稱之為事件委託。是 JavaScript 中常用繫結事件的常用技巧。顧名思義，“事件代理”即是把原本需要繫結的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是可以提高效能。
32.談一談JavaScript作用域鏈
作用域鏈的作用是保證執行環境裡有權訪問的變數和函式是有序的，作用域鏈的變數只能向上訪問，變數訪問到window物件即被終止，作用域鏈向下訪問變數是不被允許的。
當執行一段JavaScript程式碼（全域性程式碼或函式）時，JavaScript引擎會建立為其建立一個作用域又稱為執行上下文（Execution Context），在頁面載入後會首先建立一個全域性的作用域，然後每執行一個函式，會建立一個對應的作用域，從而形成了一條作用域鏈。每個作用域都有一條對應的作用域鏈，鏈頭是全域性作用域，鏈尾是當前函式作用域。
作用域鏈的作用是用於解析識別符號，當函式被建立時（不是執行），會將this、arguments、命名引數和該函式中的所有區域性變數新增到該當前作用域中，當JavaScript需要查詢變數X的時候（這個過程稱為變數解析），它首先會從作用域鏈中的鏈尾也就是當前作用域進行查詢是否有X屬性，如果沒有找到就順著作用域鏈繼續查詢，直到查詢到鏈頭，也就是全域性作用域鏈，仍未找到該變數的話，就認為這段程式碼的作用域鏈上不存在x變數，並丟擲一個引用錯誤（ReferenceError）的異常。
33.如何理解JavaScript原型鏈
JavaScript中的每個物件都有一個prototype屬性，我們稱之為原型，而原型的值也是一個物件，因此它也有自己的原型，這樣就串聯起來了一條原型鏈，原型鏈的鏈頭是object,它的prototype比較特殊，值為null。
原型鏈的作用是用於物件繼承，函式A的原型屬性(prototype property)是一個物件，當這個函式被用作建構函式來建立例項時，該函式的原型屬性將被作為原型賦值給所有物件例項，比如我們新建一個數組，陣列的方法便從陣列的原型上繼承而來。
當訪問物件的一個屬性時, 首先查詢物件本身, 找到則返回; 若未找到, 則繼續查詢其原型物件的屬性(如果還找不到實際上還會沿著原型鏈向上查詢, 直至到根). 只要沒有被覆蓋的話, 物件原型的屬性就能在所有的例項中找到，若整個原型鏈未找到則返回undefined
34.JavaScript原型，原型鏈 ? 有什麼特點？
（1）原型物件也是普通的物件，是物件一個自帶隱式的 __proto__ 屬性，原型也有可能有自己的原型，如果一個原型物件的原型不為null的話，我們就稱之為原型鏈。
（2）原型鏈是由一些用來繼承和共享屬性的物件組成的（有限的）物件鏈。
35. 對面向物件的理解
什麼是面向物件？面向物件就是在程式中，用一個物件描述現實中一個事物
為什麼使用面向物件？因為面向物件更接近於人的思維方式，更便於程式碼維護。
面向物件三大特點：封裝，繼承，多型
封裝：講現實中一個事物的屬性和方法，集中定義在程式中的一個物件中。
為什麼要封裝：更接近於人的想法，便於程式碼維護。
繼承：父物件中的成員，子物件可以直接使用。
為什麼要繼承：程式碼重用！節約記憶體空間
多型：同一樣東西，在不同情況下表現出不同的狀態。
多型方式：重寫，過載：
過載：多個同名方法，但引數列表不同，呼叫時，可根據傳入引數的不同，動態決定呼叫何種匹配的方法。
為什麼使用過載：便於呼叫，減少呼叫者負擔。
js語法不支援過載，但可用arguments物件模擬過載效果。
重寫：子物件覺得父物件的成員不好用，可在本地定義與父物件同名的成員，覆蓋父物件的成員
為什麼使用重寫：專門定義子物件與父物件之間的差異。
35.JavaScript如何實現繼承？
構造繼承
原型繼承
例項繼承
拷貝繼承
原型prototype機制或apply和call方法去實現較簡單，建議使用建構函式與原型混合方式。
function Parent(){
this.name = 'wang';
}
function Child(){
this.age = 28;
}
Child.prototype = new Parent();//繼承了Parent，通過原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被繼承的屬性
36.javascript裡面的繼承怎麼實現，如何避免原型鏈上面的物件共享
用建構函式和原型鏈的混合模式去實現繼承，避免物件共享可以參考經典的extend()函式，很多前端框架都有封裝的，就是用一個空函式當做中間變數
37.js繼承方式及其優缺點
① 原型鏈繼承的缺點
一是字面量重寫原型會中斷關係，使用引用型別的原型，並且子型別還無法給超型別傳遞引數。
② 借用建構函式（類式繼承）
借用建構函式雖然解決了剛才兩種問題，但沒有原型，則複用無從談起。所以我們需要原型鏈+借用建構函式的模式，這種模式稱為組合繼承
③ 組合式繼承
組合式繼承是比較常用的一種繼承方法，其背後的思路是 使用原型鏈實現對原型屬性和方法的繼承，而通過借用建構函式來實現對例項屬性的繼承。
38.Javascript垃圾回收方法
① 標記清除（mark and sweep）
這是JavaScript最常見的垃圾回收方式，當變數進入執行環境的時候，比如函式中宣告一個變數，垃圾回收器將其標記為“進入環境”，當變數離開環境的時候（函式執行結束）將其標記為“離開環境”。
垃圾回收器會在執行的時候給儲存在記憶體中的所有變數加上標記，然後去掉環境中的變數以及被環境中變數所引用的變數（閉包），在這些完成之後仍存在標記的就是要刪除的變量了