Q 1.一個200*200的div在不同分辨率屏幕上下左右居中，用css實現(xiàn)

div {

position:absolute;

width:200px;

height:200px;

top:50%;

left:50%;

margin-left:-50px;

height:-50px;

z-index:1000;

}

Q 2 .? 闡述清楚浮動的幾種方式（常見問題）

1.父級div定義 height

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

優(yōu)點：簡單、代碼少、容易掌握

缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題

2.父級div定義 overflow:hidden

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度

優(yōu)點：簡單、代碼少、瀏覽器支持好

3. 結(jié)尾處加空div標簽 clear:both

原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度

優(yōu)點：簡單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題

缺點：不少初學(xué)者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好

4.父級div定義 偽類:after

Q 3 . 解釋css sprites ，如何使用？

CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。

CSS Sprites為一些大型的網(wǎng)站節(jié)約了帶寬，讓提高了用戶的加載速度和用戶體驗，不需要加載更多的圖片

Q 4 .? 開發(fā)過程中遇到的內(nèi)存泄露情況，如何解決的？

內(nèi)存泄露的幾種情況:

(1)、當頁面中元素被移除或替換時，若元素綁定的事件仍沒被移除，在IE中不會作出恰當處理，此時要先手工移除事件，不然會存在內(nèi)存泄露。

btn.onclick = function(){

? ? btn.onclick =null;

? ? ? ? document.getElementById("myDiv").innerHTML ="Processing...";

? ? }

(2)、由于是函數(shù)內(nèi)定義函數(shù)，并且內(nèi)部函數(shù)--事件回調(diào)的引用外暴了，形成了閉包。閉包可以維持函數(shù)內(nèi)局部變量，使其得不到釋放。

實例如下：

obj.onclick=function(){

? ? ? ? //Even if it's a empty function? ? }

? ? obj=null;

Q 5 . javascript面向?qū)ο笾欣^承實現(xiàn)？

面向?qū)ο蟮幕咎卣饔校悍忾]、繼承、多態(tài)。

在JavaScript中實現(xiàn)繼承的方法：

1. 原型鏈（prototype chaining）

2. call()/apply()

3. 混合方式(prototype和call()/apply()結(jié)合)

4. 對象冒充

Q 6 .請描述一下 cookies sessionStorage和localstorage區(qū)別

相同點：都存儲在客戶端

不同點：1.存儲大小

· cookie數(shù)據(jù)大小不能超過4k。

· sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

2.有效時間

· localStorage? ? 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)；

· sessionStorage? 數(shù)據(jù)在當前瀏覽器窗口關(guān)閉后自動刪除。

· cookie? ? ? ? ? 設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉

3. 數(shù)據(jù)與服務(wù)器之間的交互方式

· cookie的數(shù)據(jù)會自動的傳遞到服務(wù)器，服務(wù)器端也可以寫cookie到客戶端

· sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。

Q 7 . document.write和innerHTML的區(qū)別：

document.write是直接寫入到頁面的內(nèi)容流，如果在寫之前沒有調(diào)用document.open, 瀏覽器會自動調(diào)用open。每次寫完關(guān)閉之后重新調(diào)用該函數(shù)，會導(dǎo)致頁面被重寫。

innerHTML則是DOM頁面元素的一個屬性，代表該元素的html內(nèi)容。你可以精確到某一個具體的元素來進行更改。如果想修改document的內(nèi)容，則需要修改document.documentElement.innerElement。

innerHTML將內(nèi)容寫入某個DOM節(jié)點，不會導(dǎo)致頁面全部重繪

innerHTML很多情況下都優(yōu)于document.write，其原因在于其允許更精確的控制要刷新頁面的那一個部分。

Q 8 . AJAX的四個步驟：

第一步，創(chuàng)建xmlhttprequest對象

第二步，使用xmlhttprequest對象的open（）和send（）方法發(fā)送資源請求給服務(wù)器

第三步，使用xmlhttprequest對象的responseText或responseXML屬性獲得服務(wù)器的響應(yīng)。

第四步，onreadystatechange函數(shù)，當發(fā)送請求到服務(wù)器，我們想要服務(wù)器響應(yīng)執(zhí)行一些功能就需要使用onreadystatechange函數(shù)，每次xmlhttprequest對象的readyState發(fā)生改變都會觸發(fā)onreadystatechange函數(shù)

Q 9 . xml和json的區(qū)別，請用四個詞語來形容

·? JSON相對于XML來講，數(shù)據(jù)的體積小，傳遞的速度更快些

·? JSON與JavaScript的交互更加方便，更容易解析處理，更好的數(shù)據(jù)交互

·XML對數(shù)據(jù)描述性比較好；

·? JSON的速度要遠遠快于XML

Q 10 . 三個盒子，左右定寬，中間自適應(yīng)有幾種方法

<div style="width:100%; margin:0 auto;">

? ? ? <div style="width:200px; float:right; background-color:#960">這是右側(cè)的內(nèi)容 固定寬度</div>

? ? ? <div style="width:150px; float:left; background:#6FF">這是左側(cè)的內(nèi)容 固定寬度</div>

? ? ? <div style="margin-left:150px;margin-right:200px; background-color:#9F3">中間內(nèi)容，自適應(yīng)寬度</div>

</div>

Q 11 . js基本數(shù)據(jù)類型（簡單數(shù)據(jù)類型）有哪些， 引用類型

五種基本類型: Undefined、Null、Boolean、Number和String。

引用類型? object、array、function

六種類型：Undefined、null、object、boolean、number、string

Q 12 . null 和 undefined

null： Null類型，代表“空值”，代表一個空對象指針，使用typeof運算得到 “object”，所以你可以認為它是一個特殊的對象值。

undefined： Undefined類型，當一個聲明了一個變量未初始化時，得到的就是undefined。

都表示“值的空缺”，你可以認為undefined是表示系統(tǒng)級的、出乎意料的或類似錯誤的值的空缺，而null是表示程序級的、正常的或在意料之中的值的空缺。

Q 14 . 什么是mvvm mvc是什么區(qū)別 原理

一、MVC（Model-View-Controller）

MVC是比較直觀的架構(gòu)模式，用戶操作->View（負責接收用戶的輸入操作）->Controller（業(yè)務(wù)邏輯處理）->Model（數(shù)據(jù)持久化）->View（將結(jié)果反饋給View）。

MVC使用非常廣泛，比如JavaEE中的SSH框架

二、MVVM（Model-View-ViewModel）

如果說MVP是對MVC的進一步改進，那么MVVM則是思想的完全變革。它是將“數(shù)據(jù)模型數(shù)據(jù)雙向綁定”的思想作為核心，因此在View和Model之間沒有聯(lián)系，通過ViewModel進行交互，而且Model和ViewModel之間的交互是雙向的，因此視圖的數(shù)據(jù)的變化會同時修改數(shù)據(jù)源，而數(shù)據(jù)源數(shù)據(jù)的變化也會立即反應(yīng)view。

Q 15 . px和em的區(qū)別

px表示像素 (計算機屏幕上的一個點：1px = 1/96in)，是絕對單位，不會因為其他元素的尺寸變化而變化；

em表示相對于父元素的字體大小。em是相對單位 ，沒有一個固定的度量值，而是由其他元素尺寸來決定的相對值。

Q 16 . 優(yōu)雅降級和漸進增強

漸進增強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構(gòu)建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。

優(yōu)雅降級（Graceful Degradation）：一開始就構(gòu)建站點的完整功能，然后針對瀏覽器測試和修復(fù)。比如一開始使用 CSS3 的特性構(gòu)建了一個應(yīng)用，然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。

其實漸進增強和優(yōu)雅降級并非什么新概念，只是舊的概念換了一個新的說法。在傳統(tǒng)軟件開發(fā)中，經(jīng)常會提到向上兼容和向下兼容的概念。漸進增強相當于向上兼容，而優(yōu)雅降級相當于向下兼容

Q 17 . JS哪些操作會造成內(nèi)存泄露

1）意外的全局變量引起的內(nèi)存泄露

2）閉包引起的內(nèi)存泄露

3）沒有清理的DOM元素引用

4）被遺忘的定時器或者回調(diào) 5）子元素存在引起的內(nèi)存泄露

Q 18 .瀏覽器緩存有哪些，通常緩存有哪幾種

http緩存、websql、cookie、localstorage、sessionstorage、flash緩存

19.? css中的小知識點

（1）文本首行縮進：text-index

（2）水平對齊：margin: 0 auto; text-align: center

（3）多行文字垂直居中：

? ? ? ? ? ? ? ? ? ? ? ? ? 父：display：table

? ? ? ? ? ? ? ? ? ? ? ? ? ? 子：display：table-ceil；vertical-align：middle

（3）鼠標變小手：cursor：pointer

（4）li去點：list-style:none

（5）去下劃線：text-decoration：none

（6）background-size：center---能看到圖片中心，會被填滿

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? contain---全部都能看到，但是可能填不滿

20.? 塊級元素有哪些？ 行級元素有那些？

塊級：table、ul、div、li、h1、p、form

行級（內(nèi)聯(lián)）：a、input、img

21.? 轉(zhuǎn)塊級元素、轉(zhuǎn)行內(nèi)元素、轉(zhuǎn)行內(nèi)塊級元素

塊：display：block

行：display：inline

行內(nèi)塊：display：inline-block

22.? 響應(yīng)式定位：

（1）寫在父類：display：flex

? ? ? ? ? ? ? ? ? ? ? ? ? ? flex-wrap：父類如果寬度不夠，考慮換行

（2）水平居中：jstify-content：center

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? space? between? 左右對齊，中間等距

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? space around? 等距分布

（3）垂直居中：align-items：center

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? flex-start

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? flex-end

23.? let 和const的區(qū)別：

let與const都是只在聲明所在的塊級作用域內(nèi)有效。

let聲明的變量可以改變，值和類型都可以改變，沒有限制。

const聲明的變量不得改變值，這意味著，const一旦聲明變量，就必須立即初始化，不能留到以后賦值。

24.? Ajax請求時,如何解釋json數(shù)據(jù)?

1.直接定義返回數(shù)據(jù)類型為json,然后請求成功后返回的數(shù)據(jù)就是json數(shù)據(jù)，

2.直接使用JSON.parse ()

25.? 下面代碼輸出什么？

var salary = "1000$";

(function () {

? ? console.log("Original salary was " + salary);

? ? var salary = "5000$";

? ? console.log("My New Salary " + salary);

})();

答案：

Original salary was undefined

My New Salary 5000$

26.? 下面代碼輸出什么？

var z = 1, y = z = typeof y;

console.log(y);

答案：

undefined

27.? JavaScript 中undefined和not defined的區(qū)別

未聲明變量直接使用會拋出異常：var name is not defined，如果沒有處理異常，代碼就停止運行了。

undefined，不會發(fā)生異常

28.? 下面的代碼輸出什么？

var y = 1;

if (function f(){}) {

? ? y += typeof f;

}

console.log(y);

答案： 1undefined。

29.? JavaScript中什么是閉包？寫出一個例子

var func = function () {

? ? ? ? ? ? var a=1;

? ? ? ? ? ? ? ? return function (){

? ? ? ? ? ? ? ? ? ? a++;

? ? ? ? ? ? ? ? ? ? console.log(a);

? ? ? ? ? ? ? ? };

? ? ? ? ? ? }

30.? 寫一個mul函數(shù)，使用方法如下。

function mul (x) {

? ? return function (y) {

? ? ? ? return function (z) {

? ? ? ? ? ? return x * y * z;

? ? ? ? };

? ? };

}

31.? JavaScript怎么清空數(shù)組？

1.? arrayList= [];

2.? arrayList.length = 0;

32.? 怎么判斷一個object是否是數(shù)組(array)？

function isArray(obj){

? ? return Object.prototype.toString.call( obj ) === '[object Array]';

}

33.? 下面代碼輸出什么？

var output = (function(x){

? ? delete x;

? ? return x;

})(0);

console.log(output);

答案：0

delete 操作符是將object的屬性刪去的操作

34.? 下面代碼輸出什么？

var x = { foo : 1};

var output = (function(){

? ? delete x.foo;

? ? return x.foo;

})();

console.log(output);

答案：undefine

35.? 下面代碼輸出什么？

var Employee = {

? ? company: 'xyz'

}

var emp1 = Object.create(Employee);

delete emp1.company

console.log(emp1.company);

輸出是 xyz，這里的 emp1 通過 prototype 繼承了 Employee的 company。emp1自己并沒有company屬性。所以delete操作符的作用是無效的。

36.? 什么是undefined x 1？

當我們使用 delete 操作符刪除一個數(shù)組中的元素，這個元素的位置就會變成一個占位符。打印出來就是undefined x 1。

37.? 下面代碼輸出什么？

var trees = ["xyz","xxxx","test","ryan","apple"];

delete trees[3];

console.log(trees.length);

輸出是5。因為delete操作符并不是影響數(shù)組的長度。

38.? 下面代碼輸出什么？

var bar = true;

console.log(bar + 0);

console.log(bar + "xyz");

console.log(bar + true);

console.log(bar + false);

答案

1

truexyz

2

1

下面給出一個加法操作表

Number + Number -> 加法

Boolean + Number -> 加法

Boolean + Boolean -> 加法

Number + String -> 連接

String + Boolean -> 連接

String + String -> 連接

39.? 下面代碼輸出什么？

var foo = function bar(){ return 12; };

typeof bar();

答案：bar is not defined

40.? html5有哪些新特性、移除了那些元素？ 如何處理HTML5新標簽的瀏覽器兼容版問題？

H5新特性：增強了圖形渲染、影音、數(shù)據(jù)存儲、多任務(wù)處理：繪畫 canvas、localStorage、事件監(jiān)聽、 sessionStorage、websocket

移除的元素：<font> 字體標簽、 <center> 水平居中、 <u> 下劃線、 <big>

解決：document.createElement、最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

41.? 介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

CSS盒子模型：由四個屬性組成的外邊距(margin)、內(nèi)邊距(padding)、邊界(border)、內(nèi)容區(qū)(width和height);

標準的CSS盒子模型和低端IE CSS盒子模型不同：寬高不一樣

　　標準的css盒子模型寬高就是內(nèi)容區(qū)寬高；

　　低端IE css盒子模型寬高 內(nèi)邊距﹢邊界﹢內(nèi)容區(qū)；

42. 在設(shè)置li標簽display:inline-block;屬性后，li之間出現(xiàn)空白間隙的原因，有什么解決辦法

原因：<li>標簽我們在書寫的時候為了代碼的簡潔直觀會換行，但是瀏覽器在解析的時候會把這個換行解析成一個字符。

解決辦法：標簽不換行、magin負值、讓li不閉合

43.? magin 和padding 分別適合什么場景使用

margin:

? ? 需要在border外側(cè)添加空白時；

? ? 空白處不需要背景（色）時；

? ? 上下相連的兩個盒子之間的空白，需要相互抵消時。

padding：

? ? 需要在border內(nèi)測添加空白時；

? ? 空白處需要背景（色）時；

? ? 上下相連的兩個盒子之間的空白，希望等于兩者之和時。

44.? localStorage的存儲數(shù)組對象的方式

localStorage存儲數(shù)據(jù)的格式都是以字符串的形式來存儲的，

45.? 前端解決跨域問題

解決跨域問題常用的解決方案有兩個：

JSONP：利用script標簽可跨域的特點，在跨域腳本中可以直接回調(diào)當前腳本的函數(shù)。

CORS：服務(wù)器設(shè)置HTTP響應(yīng)頭中Access-Control-Allow-Origin值，解除跨域限制。

46.? post和get請求的區(qū)別

最直觀的區(qū)別就是GET把參數(shù)包含在URL中，POST通過request body傳遞參數(shù)

GET和POST本質(zhì)上就是TCP鏈接，但是由于HTTP的規(guī)定和瀏覽器/服務(wù)器的限制，導(dǎo)致他們在應(yīng)用過程中體現(xiàn)出一些不同。 GET產(chǎn)生一個TCP數(shù)據(jù)包；POST產(chǎn)生兩個TCP數(shù)據(jù)包。（并不是所有瀏覽器都會在POST中發(fā)送兩次包，F(xiàn)irefox就只發(fā)送一次）

47.? 請求提交的方式有？

post、get、put、delete

48.? ES5和ES6區(qū)別

多了let，匿名函數(shù)，不適用原型鏈繼承類

49.? 瀏覽器內(nèi)核有？

四大內(nèi)核分別是：Trident（也稱IE內(nèi)核）、webkit、Blink、Gecko

50.? Doctype作用

<!Doctype>聲明位于文檔中的最前面，處于<html>標簽之前。告知瀏覽器的解析器，用什么文檔類型規(guī)范來解析這個文檔。

51.? 導(dǎo)入css樣式有哪幾種

1. 行內(nèi)式? ? <span style="color:red;">行內(nèi)式</span>? ? ? 寫在body標簽中

2. 嵌入式? ? 在style標簽中寫css樣式，在body中引用

3. link

4. @import