前端面試超常見的五大問題

1. 如何解決不一樣瀏覽器之間的兼容性問題，或者是否有遇到過兼容性問題，如何解決？

      這一問題主要想考察面試者對於不一樣內核和不一樣版本（如css3和css，html5和html）的瞭解，因此主要聊一下知道的不一樣瀏覽器以前一些差別（如空格大小不一樣等）及不一樣版本如何兼容（作多種處理方法）之類的便可；（

1. 瀏覽器兼容問題一：不一樣瀏覽器的標籤默認的外補丁和內補丁不一樣

   問題症狀：隨便寫幾個標籤，不加樣式控制的狀況下，各自的margin 和padding差別較大。

   碰到頻率:100%

   解決方案：CSS裏    *{margin:0;padding:0;}

   備註：這個是最多見的也是最易解決的一個瀏覽器兼容性問題，幾乎全部的CSS文件開頭都會用通配符*來設置各個標籤的內外補丁是0。

2.  

   瀏覽器兼容問題二：塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大

   問題症狀：隨便寫幾個標籤，不加樣式控制的狀況下，各自的margin 和padding差別較大。

   碰到頻率:100%

   解決方案：CSS裏    *{margin:0;padding:0;}

   備註：這個是最多見的也是最易解決的一個瀏覽器兼容性問題，幾乎全部的CSS文件開頭都會用通配符*來設置各個標籤的內外補丁是0。

    

3.  

   瀏覽器兼容問題三：設置較小高度標籤（通常小於10px），在IE6，IE7，遨遊中高度超出本身設置高度

   問題症狀：IE六、7和遨遊裏這個標籤的高度不受控制，超出本身設置的高度

   碰到頻率：60%

   解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度。

   備註：這種狀況通常出如今咱們設置小圓角背景的標籤裏。出現這個問題的緣由是IE8以前的瀏覽器都會給標籤一個最小默認的行高的高度。即便你的標籤是空的，這個標籤的高度仍是會達到默認的行高。

    

4.  

   瀏覽器兼容問題四：行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的狀況，IE6間距bug

   問題症狀：IE6裏的間距比超過設置的間距

   碰到概率：20%

   解決方案：在display:block;後面加入display:inline;display:table;

   備註：行內屬性標籤，爲了設置寬高，咱們須要設置display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具備了塊屬性float後的橫向margin的bug。不過由於它自己就是行內屬性標籤，因此咱們再加上display:inline的話，它的高寬就不可設了。這時候咱們還須要在display:inline後面加入display:talbe。

    

5.  

   瀏覽器兼容問題五：圖片默認有間距

   問題症狀：幾個img標籤放在一塊兒的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起做用。

   碰到概率：20%

   解決方案：使用float屬性爲img佈局

   備註：由於img標籤是行內屬性標籤，因此只要不超出容器寬度，img標籤都會排在一行裏，可是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。（個人一個學生使用負margin，雖然能解決，但負margin自己就是容易引發瀏覽器兼容問題的用法，因此我禁止他們使用）

    

6.  

   瀏覽器兼容問題六：標籤最低高度設置min-height不兼容

   問題症狀：由於min-height自己就是一個不兼容的CSS屬性，因此設置min-height時不能很好的被各個瀏覽器兼容

   碰到概率：5%

   解決方案：若是咱們要設置一個標籤的最小高度200px，須要進行的設置爲：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

   備註：在B/S系統前端開時，有不少狀況下咱們又這種需求。當內容小於一個值（如300px）時。容器的高度爲300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候咱們就會面臨這個兼容性問題。

    

7. 瀏覽器兼容問題七：透明度的兼容CSS設置

   作兼容頁面的方法是：每寫一小段代碼（佈局中的一行或者一塊）咱們都要在不一樣的瀏覽器中看是否兼容，固然熟練到必定的程度就沒這麼麻煩了。建議常常會碰到兼容性問題的新手使用。不少兼容性問題都是由於瀏覽器對標籤的默認屬性解析不一樣形成的，只要咱們稍加設置都能輕鬆地解決這些兼容問題。若是咱們熟悉標籤的默認屬性的話，就能很好的理解爲何會出現兼容問題以及怎麼去解決這些兼容問題。

   /* CSS hack*/ 

   我不多使用hacker的，多是我的習慣吧，我不喜歡寫的代碼IE不兼容，而後用hack來解決。不過hacker仍是很是好用的。使用hacker我能夠把瀏覽器分爲3類：IE6 ；IE7和遨遊；其餘（IE8 chrome ff safari opera等）

   ◆IE6認識的hacker 是下劃線_ 和星號 *

   ◆IE7 遨遊認識的hacker是星號 *

   好比這樣一個CSS設置：

   height:300px;*height:200px;_height:100px; 

   IE6瀏覽器在讀到height:300px的時候會認爲高時300px；繼續往下讀，他也認識*heihgt， 因此當IE6讀到*height:200px的時候會覆蓋掉前一條的相沖突設置，認爲高度是200px。繼續往下讀，IE6還認識_height,因此他又會覆蓋掉200px高的設置，把高度設置爲100px；

   IE7和遨遊也是同樣的從高度300px的設置往下讀。當它們讀到*height200px的時候就停下了，由於它們不認識_height。因此它們會把高度解析爲200px，剩下的瀏覽器只認識第一個height:300px;因此他們會把高度解析爲300px。由於優先級相同且想衝突的屬性設置後一個會覆蓋掉前一個，因此書寫的次序是很重要的

）

    2.一個網頁從地址欄輸入url到最後在瀏覽器中顯示，中間通過了那些過程？

      這個是網上比較多人認爲問得較有水平的一個問題，須要瞭解整個從域名到Ip到具體請求的整個流程，原理能夠一兩句話簡單歸納，也能夠講得比較細緻，但以後通常會牽引出面試官想要問的其餘問題；（請參考：http://www.cnblogs.com/rollenholt/archive/2012/03/23/2414345.html）

   

    3.Cookie、session、localStorage的區別和用法；

      主要爲了考察對於前端內容存儲的一些問題，三者的明顯區別，三者應該用在什麼地方，什麼狀況應該用那種，可從這些方面進行回答；

（sessionStorage 、localStorage 和 cookie 之間的區別

共同點：都是保存在瀏覽器端，且同源的。

區別：cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。

而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。

存儲大小限制也不一樣，

cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。

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

cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。

做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；

localStorage 在全部同源窗口中都是共享的；

cookie也是在全部同源窗口中都是共享的。

使用HTML5 Web存儲的localStorage和sessionStorage方式進行Web頁面數據本地存儲。

頁面參考以下圖，能將頁面上的數據進行本地存儲。並能讀取存儲的數據顯示在頁面上。

localStorage（本地存儲）,能夠長期存儲數據，沒有時間限制，一天，一年，兩年甚至更長，數據均可以使用。

sessionStorage（會話存儲），只有在瀏覽器被關閉以前使用，建立另外一個頁面時贊成可使用，關閉瀏覽器以後數據就會消失。)

    4.盒模型；

    盒模型基本是前端學習的入門課，因此這也是比較多面試官想問的問題，考察基礎；

  （請參考：http://www.cnblogs.com/sunyunh/archive/2012/09/01/2666841.html）

    5.Doctype的意義、做用和具體內容；

     Doctype用於聲明DTD類型，但在Html5中已再也不使用，因此這個問題會逐漸比較少問及。