web前端面試集錦（本身蒐集的，若有錯誤請不吝賜教）

css

1 瀏覽器兼容性 CSS hack（針對IE6-,IE7,IE8,IE9以及其餘瀏覽器）

‘ * ’ : 全部的IE瀏覽器都能識別

說明：在標準模式中

「-″減號是IE6專有的hack

「\9″ IE6/IE7/IE8/IE9/IE10都生效

「\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

「\9\0″ 只對IE9/IE10生效，是IE9/10的hack

(還能夠這樣解決)

<!-- 放置全部瀏覽器的樣式 -->

<link rel="stylesheet" href="/css/style.css" type="text/css">

<!-- 只放置IE必須的，而不能經過W3C的代碼 -->

<!-- [if ie] -->

<link rel="stylesheet" href="/css/style.css" type="text/css">

<!-- [endif] -->

2 .  css position有幾個值，做用，默認元素的position是什麼？

css position 有5個值，absolute(相對於static定位之外的第一個父元素進行定位) fixed （相對於瀏覽器窗口定位）relative(相對於其正常位置定位) static(默認值，沒有定位) inherit(規定應該從父元素繼承Position屬性的值)

3. 行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding

 

4．Css清除浮動方法

方法一：添加新的元素、應用 clear：both；

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

方法二：父級div定義 overflow: auto

.over-flow{

    overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題

}

  方法三  :after 方法：（注意：做用於浮動元素的父親）

.outer {zoom:1;}    /* for IE6/7 */

.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}   /*for FF/chrome/opera/IE8*/

5．簡單列出所知道的css3以及html5的一些經常使用屬性或者標籤

 

Css3

border-radius 邊框圓角                          box-shadow 邊框陰影 

background-size 背景圖片大小                    text-shadow  文本陰影

word-wrap: normal | break-word  容許長單詞換到下一行

word-break:normal | break-all | keep-all  規定自動換行的規則

text-overflow:clip | ellipsis | string

translate(50px,100px) , transform:rotate(30deg) , transform:scale(2,4);

transform:skew(30deg,30deg),  transform:rotate(30deg).

過渡 transition  

Html5

<canvas> <video> <audio> <footer> <header><hgroup><nav><time><article>

 

屬性： data-aaa   dir (規定元素中內容的文本方向) draggable(規定是否容許用戶拖動元素)  accesskey(規定訪問元素的鍵盤快捷鍵)

Contenteditable (規定是否容許用戶編輯內容)

6. 解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量

7. CSS選擇符有哪些?哪些屬性能夠繼承?優先級算法如何計算?內聯和important哪一個優先級高?
標籤選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標籤選擇
後者優先級高

8. 你如何對網站的文件和資源進行優化?
文件合併
文件最小化/文件壓縮
使用CDN託管
緩存的使用

9．Css佈局：三列，中間寬度自適應，左右邊寬度固定100px;

.box {width:100%;height:200px;position:relative;}

.left{position:absolute;left:0px;top:0px;width:100px;height:100%;}

.right{position:absolute;right:0px;top:0px;width:100px;height:100%;}

.center {margin-left:100px;margin-right:100px;height:100%;}

<div class="box">

<div class="left"></div>

<div class="right"></div>

<div class="center"></div>

</div>

JS

1. JS有幾種數據類型 分別是什麼？

字符串（string）,數字（number）,數組（array）,布爾（boolean）

對象（object）,Null , undefined

 

2.Jquery獲取元素的寬

$.width()  獲取內容區域的寬度（不包括padding margin border的寬度）

$.innerWidth() 獲取到包括內邊距的寬度（content+padding）

$.outerWidth() 獲取到內邊距+邊框的寬度  （content+padding+border）

$.outerWidth(true)     content+padding+border+margin）

 

3.  面象對象有幾種模式，分別是什麼？

單例模式 (就是一種最簡單的面象對象, 一次只有一個實例)

工廠模式

構造函數

原型模式

4. Ajax有幾個狀態值，每一個狀態值表明什麼意思？

0 - (未初始化)尚未調用send()方法
1 - (載入)已調用send()方法，正在發送請求
2 - (載入完成)send()方法執行完成，
3 - (交互)正在解析響應內容
4 - (完成)響應內容解析完成，能夠在客戶端調用了

 

5. 簡述JS的做用域以及做用域鏈

做用域：包含全局做用域和局部做用域

全局做用域使用範圍①最外層函數和最外層函數外定義的變量有全局做用域

②全部未定義直接賦值的變量自動申明未擁有全局做用域

③全部window對象的屬性擁有全局做用域

局部做用域：通常只在固定的代碼片斷內能夠訪問，好比：函數內部

 

6. this關鍵字

var name1 = "windowName";

function outer(){

var name1 = "我是上一級做用域";

function inner(){

//var name1 = "我是根本"

alert(this.name1); //這個是屬性 輸出是ABC 這裏this指向的是window;

alert(name1); //這個是變量 輸出的是cba這裏考的是做用域，

}

inner();

}

• outer();

輸出的順序爲： windowName     我是上一級做用域

 

7． 數組  split() join() 的區別  數組方法pop() push() unshift() shift()

var str2  = "012345678";

var str222 = str2.split("");

alert(str2.substring(2,8))    

alert(str222)

 

split()  前者是切割成數組的形式，join()後者是將數組轉換成字符串
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除

 

輸出：234567    0,1,2,3,4,5,6,7,8

 

8．  簡述閉包是什麼？有什麼特性？對頁面有什麼影響？解決方法？

     閉包是什麼：閉包就是可以讀取其餘函數內部變量的函數

     有什麼特性：能夠讀取函數內部的變量，讓變量的值始終保持在內存中

     影響：使函數中的變量都保存在內存中，內存消耗大，網頁性能問題，IE中致使內存泄露

     解決方法： 退出函數以前，將不是用的局部變量所有釋放

 

9.   利用原型以及原型鏈的原理，寫2個函數 分別爲加法和減法 ，實現 5+3-2 

Number.prototype.plus = function(n){ 

return this+n;

}

Number.prototype.reduce = function(n){ 

return this - n

}

(5).plus(3).reduce(2)

 

10. 添加 刪除 替換 插入到某個接點的方法 obj.appendChidl() obj.innersetBefore obj.replaceChild obj.removeChild