1. Web前端崗位面試題有哪些
前端面試題匯總，基本上會有四大類問題，具體如下：
一、HTML
1、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?
2、HTML5 為什麼只需要寫 <!DOCTYPE HTML>？
3、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
4、頁面導入樣式時，使用link和@import有什麼區別？
5、介紹一下你對瀏覽器內核的理解？
6、常見的瀏覽器內核有哪些？
7、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
8、簡述一下你對HTML語義化的理解？
9、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
11、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
12、iframe有那些缺點？
13、Label的作用是什麼？是怎麼用的？（加 for 或 包裹）
14、HTML5的form如何關閉自動完成功能？
15、如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
16、webSocket如何兼容低瀏覽器？(阿里)
17、頁面可見性（Page Visibility）API 可以有哪些用途？
18、如何在頁面上實現一個圓形的可點擊區域？
19、實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、網頁驗證碼是幹嘛的，是為了解決什麼安全問題？
21、tite與h1的區別、b與strong的區別、i與em的區別？
二、css
1、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
2、CSS選擇符有哪些？哪些屬性可以繼承？
3、CSS優先順序演算法如何計算？
4、CSS3新增偽類有那些？
5、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
6、display有哪些值？說明他們的作用。
7、position的值relative和absolute定位原點是？
8、CSS3有哪些新特性？
9、請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
11、一個滿屏 品 字布局 如何設計?
三、常見兼容性問題？
1、li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
2、經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？
3、為什麼要初始化CSS樣式。
4、absolute的containing block計算方式跟正常流有什麼不同？
5、CSS里的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
6、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
7、對BFC規范(塊級格式化上下文：block formatting context)的理解？
8、CSS權重優先順序是如何計算的？
9、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式
10、移動端的布局用過媒體查詢嗎？
11、使用 CSS 預處理器嗎？喜歡那個？
12、CSS優化、提高性能的方法有哪些？
13、瀏覽器是怎樣解析CSS選擇器的？
14、在網頁中的應該使用奇數還是偶數的字體？為什麼呢？
15、margin和padding分別適合什麼場景使用？
16、抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
17、元素豎向的百分比設定是相對於容器的高度嗎？
18、全屏滾動的原理是什麼？用到了CSS的那些屬性？
19、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
20、視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）
21、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
22、如何修改chrome記住密碼後自動填充表單的黃色背景 ？
23、你對line-height是如何理解的？
24、設置元素浮動後，該元素的display值是多少？（自動變成display:block）
25、怎麼讓Chrome支持小於12px 的文字？
26、讓頁面里的字體變清晰，變細用CSS怎麼做？（-webkit-font-smoothing: antialiased;）
27、font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思？
28、position:fixed;在android下無效怎麼處理？
29、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）
30、display:inline-block 什麼時候會顯示間隙？(攜程)
31、overflow: scroll時不能平滑滾動的問題怎麼處理？
32、有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
33、png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？
34、什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）
35、style標簽寫在body後與body前有什麼區別？
四、JavaScript
1、介紹JavaScript的基本數據類型。
2、說說寫JavaScript的基本規范？
3、JavaScript原型，原型鏈 ? 有什麼特點？
4、JavaScript有幾種類型的值？（堆：原始數據類型和 棧：引用數據類型），你能畫一下他們的內存圖嗎？
5、Javascript如何實現繼承？
6、Javascript創建對象的幾種方式？
7、Javascript作用鏈域?
8、談談This對象的理解。
9、eval是做什麼的？
10、什麼是window對象? 什麼是document對象?
11、null，undefined的區別？
12、寫一個通用的事件偵聽器函數(機試題)。
13、[「1」, 「2」, 「3」].map(parseInt) 答案是多少？
14、關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？
15、什麼是閉包（closure），為什麼要用它？
16、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？
17、如何判斷一個對象是否屬於某個類？
18、new操作符具體幹了什麼呢?
19、用原生JavaScript的實現過什麼功能嗎？
20、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
21、對JSON的了解？
22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎？
23、js延遲載入的方式有哪些？
24、Ajax 是什麼? 如何創建一個Ajax？
25、同步和非同步的區別?
26、如何解決跨域問題?
27、頁面編碼和被請求的資源編碼如果不一致如何處理？
28、模塊化開發怎麼做？
29、AMD（Moles/Asynchronous-Definition）、CMD（Common MoleDefinition）規范區別？
30、requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何 緩存的？）
31、讓你自己設計實現一個requireJS，你會怎麼做？
32、談一談你對ECMAScript6的了解？
33、ECMAScript6 怎麼寫class么，為什麼會出現class這種東西?
34、非同步載入的方式有哪些？
35、documen.write和 innerHTML的區別?
36、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
37、.call() 和 .apply() 的含義和區別？
38、數組和對象有哪些原生方法，列舉一下？
39、JS 怎麼實現一個類。怎麼實例化這個類
40、JavaScript中的作用域與變數聲明提升？
41、如何編寫高性能的Javascript？
42、那些操作會造成內存泄漏？
43、JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？
44、jQuery.fn的init方法返回的this指的是什麼對象？為什麼要返回this？
45、jquery中如何將數組轉化為json字元串，然後再轉化回來？
46、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？
47、jquery.extend 與 jquery.fn.extend的區別？
48、jQuery 的隊列是如何實現的？隊列可以用在哪些地方？
49、談一下Jquery中的bind(),live(),delegate(),on()的區別？
50、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
51、是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用？
52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）
53、針對 jQuery性能的優化方法？
54、Jquery與jQuery UI有啥區別？
55、JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？
56、jquery 中如何將數組轉化為json字元串，然後再轉化回來？
57、jQuery和Zepto的區別？各自的使用場景？
58、針對 jQuery 的優化方法？
59、Zepto的點透問題如何解決？
60、jQueryUI如何自定義組件?
61、需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？
62、如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）
63、移動端最小觸控區域是多大？
64、jQuery 的 slideUp動畫 ，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反復執行，該如何處理呢?
65、把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別？瀏覽器會如何解析它們？
66、移動端的點擊事件的有延遲，時間是多久，為什麼會有？ 怎麼解決這個延時？（click 有 300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）
67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
68、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？
69、解釋JavaScript中的作用域與變數聲明提升？
70、那些操作會造成內存泄漏？
71、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
72、Node.js的適用場景？
(如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
73、解釋一下 Backbone 的 MVC 實現方式？
74、什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?
75、知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
76、如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
77、前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
78、簡述一下 Handlebars 的基本用法？
79、簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？
80、用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)
檢測瀏覽器版本版本有哪些方式？
81、我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲
2. web前端面試經常問到的面試題有哪些
Web前端經常被問到的面試題及答案
一、HTML+CSS
1.對WEB標准以及W3C的理解與認識
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外
鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維
護、改版方便，不需要變動頁面內容、提供列印版本而不需要復制內容、提高網站易用性;
2.xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於聲明文檔使用那種規范(html/Xhtml)一般為 嚴格 過度 基於框架的html文檔
加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug
4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 導入
區別 ：同時載入
前者無兼容性，後者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式，後者不可
6.CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?
標簽選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標簽選擇
後者優先順序高
7.前端頁面有哪三層構成，分別是什麼?作用是什麼?
結構層 Html 表示層 CSS 行為層 js
8.css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}
9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?
Ie(Ie內核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
二、Javascript
1.javascript的typeof返回哪些數據類型
Object number function boolean underfind
2.例舉3種強制類型轉換和2種隱式類型轉換?
強制(parseInt,parseFloat,number)
隱式(== – ===)
3.split() join() 的區別
前者是切割成數組的形式，後者是將數組轉換成字元串
4.數組方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除
5.事件綁定和普通事件有什麼區別
6.IE和DOM事件流的區別
1.執行順序不一樣、
2.參數不一樣
3.事件加不加on
4.this指向問題
7.IE和標准下有哪些兼容性的寫法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax請求的時候get 和post方式的區別
一個在url後面 一個放在虛擬載體裡面
有大小限制
安全問題
應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的
9.call和apply的區別
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax請求時，如何解釋json數據
使用eval parse 鑒於安全性考慮 使用parse更靠譜
11.b繼承a的方法
12.寫一個獲取非行間樣式的函數
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
3. 前端面試會提問到哪些
在面試前端的過程中，有些問題是經常會被提問到的
一、基礎篇
1. 在不使用第三個變數的情況下，如何調換a與b的值？
2. px與em的區別
3. 簡述一下盒模型
4. 頁面導入樣式時，使用link和@import有什麼區別？
5. 簡述一下事件代理
二、HTML常見題目
01、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義？
02、HTML5為什麼只需要寫？
03、行內元素有哪些？塊級元素有哪些？空(void)元素有哪些？
04、頁面導入樣式時，使用link和@import有什麼區別？
05、介紹一下你對瀏覽器內核的理解？
06、常見的瀏覽器內核有哪些？
07、html5有哪些新特性、移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
08、如何區分HTML和HTML5？
09、簡述一下你對HTML語義化的理解？
10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
三、CSS類的題目
01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
02、CSS選擇符有哪些？哪些屬性可以繼承？
03、CSS優先順序演算法如何計算？
04、CSS3新增偽類有哪些？
05、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
06、display有哪些值？說明他們的作用。
07、position的值relative和absolute定位原點是？
08、CSS3有哪些新特性？
09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
四、JavaScript類的題目
01、JavaScript中this是如何工作的
02、請解釋原型繼承的原理。
03、什麼是閉包(closure)，如何使用它，為什麼要使用它？
04、.call 和.apply的區別是什麼？
05、請指出JavaScript 宿主對象(host objects) 和原生對象(native objects) 的區別？
06、請指出以下代碼的區別：function Person(){}、var person = Person()、var person = new Person()？
07、請解釋變數聲明提升(hoisting)。
08、什麼是 「use strict」; ？ 使用它的好處和壞處分別是什麼？
09、什麼是事件循環 (event loop)？
10、請解釋同步 (synchronous) 和非同步 (asynchronous) 函數的區別。
五、開發及性能優化類題目
01、如何規避javascript多人開發函數重名問題？
02、請說出三種減低頁面載入時間的方法.
03、說說你所了解到的Web攻擊技術。
04、說說你說了解的前端性能優化方法？
05、前端開發中，如何優化圖像？圖像格式的區別？
06、瀏覽器是如何渲染頁面的？
07、頁面重構怎麼操作？
08、什麼叫優雅降級和漸進增強？
09、前端需要注意哪些SEO？如何做SEO優化？
10、平時如何管理你的項目？
4. Web前端面試題：CSS 選擇符有哪些
三種基本的選擇器類型語法如下：◆標簽名選擇器，如：p{}，即直接使用HTML標簽作為選擇器。◆類選擇器，如.polaris{}。◆ID選擇器，如#polaris{}。所有元素可繼承：visibility和cursor。內聯元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。終端塊狀元素可繼承：text-indent和text-align。列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。
5. Web前端面試指導（十六）：為什麼要初始化CSS
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
初始化CSS樣式主要是提高編碼質量，如果不初始化整個頁面做完很糟糕，重復的CSS樣式很多。去掉標簽的默認樣式如：margin,padding，其他瀏覽器默認解析字體大小，字體設置。來自博客園。
6. Web前端面試指導（五十）：CSS樣式書寫有哪些
一、CSS書寫順序
1.位置屬性(position, top, right,z-index, display, float等)
2.大小(width, height, padding,margin)
3.文字系列(font, line-height,letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、CSS書寫規范
1.使用CSS縮寫屬性
CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。
2.去掉小數點前的「0」
3.簡寫命名
很多用戶都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦！
4.16進制顏色代碼縮寫
有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗為主。
5連字元CSS選擇器命名規范
1）長名稱或片語可以使用中橫線來為選擇器命名。
2）不建議使用「_」下劃線來命名CSS選擇器，為什麼呢？
輸入的時候少按一個shift鍵；瀏覽器兼容問題（比如使用_tips的選擇器命名，在IE6是無效的）能良好區分JavaScript變數命名（JS變數命名是用「_」）
6.不要隨意使用id
id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復使用，另外id的優先順序優先與class，所以id應該按需使用，而不能濫用。
7.為選擇器添加狀態前綴
有時候可以給選擇器添加一個表示狀態的前綴，讓語義更明了，比如下圖是添加了「.is-」前綴。
三、CSS命名規范
常用的CSS命名規則
頭：header
內容：content/Container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
登錄條：loginbar
標志：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權：right
滾動：scroll
內容：content
標簽：tags
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guide
服務：service
注冊：regsiter
狀態：status
投票：vote
合作夥伴：partner
ID的命名-頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
ID的命名-導航
導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary
ID的命名-功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：register
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作夥伴：partner
友情鏈接：link
版權：right
四、注釋規范
/* Header */
內容區
/* End Header */
五、注意事項
1.一律小寫;
2.盡量用英文;
3.盡量不縮寫，除非一看就明白的單詞。
六、CSS樣式表文件命名
主要的 master.css
模塊 mole.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
列印 print.css
7. web前端面試題：CSS引入的方式有哪些
三種方式使用css樣式
寫在文件裡面，使用style標簽
寫在標簽裡面。例如<p style="color:red">內容</p>
單獨寫一個文件，<link rel="stylesheet" href="css/style.css" />href裡面是css文件的路徑，根據自己的實際情況進行變化
8. 面試Web前端需要注意什麼會面試哪些問題
作為一名HTML5前端工程師，為了工作，為了就業我們免不了要參加各種各樣的面試。為此總結了面試前的注意事項：
第一：注意自己的儀容儀表
面試之前，一定要再次從頭到腳地將自己的儀容儀表檢查一遍。檢查時主要包括，自己的牙縫是不是還有食物殘渣，所以你需要就近找一個衛生間，如果沒有衛生間就近找一個角落也是可以的，但是切記一定不要在大庭廣眾之下。因此，為了給自己整理出著裝的時間請在約定時間前20分鍾到達。
第二：再次檢查面試時所需的資料是否都已帶全
這些資料主要包括：身份證明、學歷文憑證明、個人簡歷、以往作品等等，如果這些東西齊全之後，需要對這些資料做一個整理與排序。因為沒有哪個面試官希望看到面試者拿出一堆「莫名其妙」的東西塞給他，讓他自己再一頁一頁的翻找自己需要的內容，如果說這些資料在面試官手中不小心散落一地，結果可想而知。這樣的求職者在面試官眼中也一定不是一個讓人放心、有條不紊的員工。當然如果檢查時發現資料沒有帶全，也不要緊張。反而你要慶倖幸虧及時檢查，也有足夠的時間組織語言去向面試官解釋。
第三：面試之前將通信工具調成振動或關閉狀態
雖然說面試者與面試官之間是一個平等的關系，但畢竟你是去人家公司求職的，始終處於一個被動的狀態，所以最起碼的尊重還是要做到的。曾經有調查顯示，對於面試過程中接電話或是被電話打斷的求職者，會被HR減分。
第四：等候面試官時，仔細觀察多了解面試公司
在等候面試官時，可以暗自觀察一下公司的大體情況比如員工的著裝風格、公司的LOGO或是貼在牆上的企業文化、公司的環境等等，一來可以在接下來的面試過程中表現出自己對公司的認同感，二來也可以讓自己對求職公司多些了解，以確定是否要接受這里的工作。如果你身邊有公司的資料宣傳架，不妨取一本翻看一下，也會增加HR對你的好感。
第五：放鬆心情，保持自信
面試時一定要保持一定的自信，這樣也會給面試官留下很好的印象。面試只是你步入工作的第一步，即便是失敗了那也是人生重要的經歷。失敗是為了更好的迎接下一個挑戰。
作為一名web前端工程師千萬不要覺得懂技術面試就能萬事大吉了，像以上五點細節性的東西也是一定要掌握的。
面試題系列：
網頁鏈接
9. 前端面試一問三不知怎麼辦
前端面試一問三不知的時候，千萬別慌亂，可以先停一停和面試官說這個問題你需要思考一下再回答，或者說你因為太緊張之類的一時想不起來答案。
有些面試官會直接電話過去要求面試，由於面試者(尤其是學生)處於弱勢方，可能並不會拒絕面試要求，但並不意味著面試者處於最佳的物理和精神狀態下，有可能會導致面試者不能很好的發揮自己原有的實力。所以如果面試官突然打電話過來。
沒有準備好的話，不要怕冒犯面試官，一定要另外約個時間，面試官肯定會再打過來的。遭到否定面試官有可能會否定你描述的一些東西，有可能是你字眼寫的太過，比如將「熟悉」的東西寫成了「精通」，勾起了面試官的「好奇」。
有可能故意試壓，考驗你的反應，但遇到否定的時候，不要急於反駁或者是手足無措，而是詢問自省和主動討論。氣場不和有的面試官性格嚴謹沉悶，而面試者可能思維活躍，整個面試過程可能會變成面試官不停的打斷面試者讓其思維聚焦。
而面試者感到思維不停被打斷，很是氣惱，影響發揮。這種情況不可避免，但遇到這樣的面試官，請保持謙和的態度，重點是展示自己技術的廣度、深度，氣場不和並不會產生決定性的影響，面試官也不會因為這樣的原因而給與錯誤的評判。
盡量留下好的印象。結束通知有的面試官會在面試結束後說：「我的問題問完了，如果有進一步消息的話，我們會再聯系你」。面試的大部分結果，其實當場就出來了，如果你感覺給出結果的時間點不夠明確，可以反問他：「如果三天內沒有聯系，是不是就代表沒有通過？」省得讓你懷有不確切的希望。
最後，還可以挽留下面試官，講講這場面試中你的一些疑惑，獲得面試官的反饋，也可以知道自己目前哪一方面做得不足。面試中面對不會的問題面試中遇到問題不會回答，這是非常正常的，畢竟大家在學習過程中遇到的問題，跟我們在工作中遇到的問題是非常不一樣的。
除此之外，我們看問題的角度，也是有差別很大的。舉個例子，很多人都在看ReactFiber，但是如果問你們，為什麼要有Fiber這個東西，可能很多人都回答不上來，因為大家只在社區裡面看到說，Fiber是怎麼工作的啊。
但是為什麼要有Fiber？如果沒有會怎樣，而這種思考，其實是非常底層的。我相信，很多人可能都沒有思考過。那如果遇到的問題不會，你可以先選擇不會，說我覺得自己沒有信心能答出這個問題，當然我更希望聽到你說。
我現在不會，但是你給我兩分鍾思考一下，我想一下這個問題有沒有答案？我覺得這是一個很好的思考習慣，首先你在面對不會的東西是坦然的，我當下不會，很正常，我之前沒有思考過這個問題嘛，那我們再花兩分鍾思考一下。
給一個初步的答案。所以說遇到問題，也不用不會就不會，也可以有一個積極的方式回應。從面試官的角度來說，面試中考察的題目，並不是僅僅考察這道題目本身，題目的對錯並不跟最終結果直接掛鉤。面試官更希望以題目為契機。
考察面試者分析問題，解決問題的能力，以及交流過程中所體現的邏輯推理和思維方式等。跟面試官聊業務業務跟項目是完全不一樣的東西，業務認知和思考也是很重要的一個考察點，這方面面試官可能會問兩個點：業務場景和技術突破。
業務場景：面試官會詢問面試者他們的產品、業務模式、商業模式等，了解下面試者對於產品的誕生、定位、發展的認知。技術突破：技術與業務相結合這點在阿里也是一直在說但鮮有人做的非常好的地方，所以有的時候也會考察面試者。
看看他們所做的技術是如何從業務出發、給業務帶來了哪些改變以及如何去評估兩者之間產生的結果。面試結束反向互動面試官在掛斷之前，基本會給與候選人反問的機會，一般會表述為「你有什麼要問我的嗎」？無論面試的怎樣。
都希望你能說出心中的疑惑，比如面試中的某個題目、整體的評價反饋、你的建議或者了解所負責的業務，所在的團隊等等，而從面試官的角度來看，如果候選人願意反問你問題，至少能證明他是個好學的人。所以不要放棄這個互動的機會。
面試反饋每場面試結束後，面試官都會在系統里留下面試反饋，如果面試失敗，簡歷會放在人才庫里，很多人會在其中撈取簡歷，以後的面試官也可以看到之前所有的面試記錄，之所以講到這一點，是希望大家在面試中能夠保持謙和積極的心態。
認真面對每一場面試，即使這場面試沒有成功，但如果展示了好的品質，也會增加被發掘的機會，為你以後面試成功鋪路。保持聯絡如果跟面試官聊的比較好，可以請求加個微信之類的，面試是一個長期的事情，哪怕此次面試沒有通過。
以後還可能面試進來的，與面試官保持聯絡。前端面試題筆記面試會了，面試題也不能落下，這套面試筆記除了有CSS、JS、Vue、React、性能優化、伺服器埠、設計模式、數據結構和演算法面試題外，加了手寫代碼面試題。
這下面試官讓我們寫代碼也不怕啦！CSS問題flex布局css3的新特性img中alt和title的區別用純CSS創建一個三角形如何理解CSS的盒子模型？如何讓一個div水平居中如何讓一個div水平垂直居中如何清除浮動。
10. CSS面試須知，哪些需要掌握得CSS技巧
主要都圍繞知識點的理解與css兼容性問題上，請參考下面的
2.1 link和@import都可以為頁面引入CSS文件，其區別是？
將樣式定義在單獨的.css的文件里，link和@import都可以在html頁面引入css文件。有link和@import兩種方式，導入方式如下：
link方式：<link rel=」stylesheet」 type=」text/css」 href=」aa.css」>
@import方式：<style type=」text/css」>@import 「aa.css」;</style>
link和@import兩種導入css文件的區別：
祖先的差別。Link屬於XHTML標簽，而@import完全是CSS提供的一種方式。Link標簽除了可以載入CSS外，還可以做很多其他的事情，比如定義RCC，定義rel連接屬性等；@import就只能載入css了。
載入順序的差別。當一個頁面被載入的時候，link引用的CSS會同時被載入，而@import引用的CSS會等到頁面全部被下載完再被載入。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式（就是閃爍），網速慢時更為明顯。
兼容性的差別。由於@import是CSS2.1提出的所有老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。
使用DOM控制樣式時的差別。當使用JavaScript控制DOM去改變樣式的時候，只能使用link標簽，因為@import不是DOM可以控制的。
@Import可以在css中再次引入其他樣式表，比如可以創建一個主樣式表，在主樣式表中再引入其他的樣式表。
2.2 如何理解CSS樣式表的層疊性？
CSS使用層疊的原則來考慮繼承、層疊次序和優先順序等重要特徵，從而判斷相互沖突的規則中哪個規則應該起作用。
繼承性是指，許多CSS的樣式規則不但影響選擇器所定義的元素，而且會被這些元素的後代繼承。
層疊性是指，當一個web頁面使用多個樣式表，多個樣式表中的樣式可層疊為一個。在多個樣式表之間所定義的樣式沒有沖突的時候，瀏覽器會顯示所有的樣式。
優先順序是指，當發生樣式定義沖突時，瀏覽器首先會按照不同樣式規則的優先順序來應用樣式。CSS樣式的優先順序如下所示（其中數字3擁有最高的優先權）：
1.瀏覽器預設設置；
2.外部樣式表（.css文件）或者內部樣式表（位於<head>元素內部）；
3.內聯樣式（作為某個元素的style屬性的值）。
同等優先順序下，以最後定義的樣式為准，important比內聯高。
2.3 哪些屬性可以繼承？
Css中可以繼承的屬性如下：
文本相關屬性：font-family、font-size、font-style、font-variant、font-weight、font 、letter-spacing、line-height、text-align、 text-indent、 text-transform 、word-spacing 、color；
列表相關屬性：list-style-image、list-style-position、list-style-type、list-style；
表格相關屬性：border-collapse、border-spacing、caption-side、table-layoute；
其他屬性：Cursor、visibility；
2.4 CSS選擇器中，元素選擇器和類選擇器的區別是什麼？
元素選擇器是常見的CSS選擇器，即文檔的元素就是最基本的選擇器。選擇器通常是某個HTML元素，比如<p>、<h1>、<em>、<a>等，甚至可以是<html>元素本身。
類選擇器用於將樣式規則與附帶class屬性的元素匹配，其中該class屬性的值為類選擇器中指定的值。使用類選擇器時，首先要定義樣式類，其語法為：
.className{ }；
所有能夠附帶class屬性的元素都可以使用此樣式聲明。只需要將class屬性的值設置為」className」，則可以將類選擇器的樣式與元素關聯。
在實際使用時，如果需要為某種元素定義樣式，則往往使用元素選擇器；如果要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器。
2.5 簡要描述CSS中的定位機制
CSS中，除了默認的流定位方式以外，還有如下幾種定位機制：浮動定位、相對定位、絕對定位和固定定位。
浮動定位是將元素排除在普通流之外，並且將它放置在包含框的左邊或者右邊，但是依舊位於包含框之內。
相對定位將元素相對於它在普通流中的位置進行定位。
絕對定位是指將元素的內容從普通流中完全移除，並且可以使用偏移屬性來固定該元素的位置。
固定定位是指將元素的內容固定在頁面的某個位置。
2.6 display屬性和 visibility屬性的區別？
可以使用display屬性定義建立布局是元素生成的顯示框類型。
1.如果將display屬性設置為block，可以讓行內元素表現得像塊級元素一樣；
2.如果將display屬性設置為inline，可以讓塊級元素表現得像內聯元素一樣；
3.可以通過把display屬性設置為none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不在顯示，不佔用文檔中的空間。
在DIV設計中，室友display:none屬性後，HTML元素（對象）的寬度。高度等各種
屬性都將」丟失」；而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。
2.7 簡述對CSS的盒子模型的理解？
CSS盒子模型也叫做框模型，具備內容（content）、填充（padding）、邊框（border）、邊距（margin）這些屬性。在CSS中，每個元素都被視為一個框，而每個框都有三個屬性：
border：元素的邊框（可能不可見），用於將框的邊緣與其他框分開；
margin：外邊距，表示框的邊緣與相鄰框之間的距離，也稱為頁邊空白；
padding：內邊距，表示框內容和邊框之間的空間。
盒子模型的結構如圖所示：
由上圖可以看出，width和height指的是內容區域的寬度和高度。增加內邊距、外邊距和邊框不會影響到內容區域的尺寸，但會增加元素框的總尺寸。
因此，如果在一個具有邊框的元素中放置文本，往往需要設置一些內邊距，以便文本的邊緣不要接觸邊框，這樣更便於閱讀。而外邊距則可以在多個元素框之間創建空白，避免這些框都擠在一起。因此，在設計頁面時，經常會使用padding屬性和margin屬性來設置頁面的布局。但是，必須注意的是，一旦用了padding屬性或者margin屬性設置了元素的邊距以後，會增加元素在頁面布局中所佔的面積。
2.8 簡述CSS3中的偽類選擇器？
CSS3提供了大量偽類選擇器，瀏覽器對於有些偽類選擇器的支持還不太好。目前，常用的偽類選擇器有：
目標偽類：即 :target，突出顯示活動的HTML錨，用於選取當前活動的目標元素；
元素狀態偽類：比如 :enabled、:disabled、:checked；
結構偽類： 比如 :first-child、:last-child、:empty、:only-child；
否定偽類：即 :not(selector)，匹配非指定元素/選擇器的每個元素。
2.9 為什麼建議設置背景圖像的同時還設置背景顏色？
一般建議在使用背景圖片的同時提供background-color屬性，並且將其設置為和圖像主要顏色類似的顏色。這樣，如果正在載入頁面，或者因為各種原因無法顯示背景圖像時，頁面可以使用這種顏色作為背景色。
2.10 如何居中div？如何居中一個浮動元素？
給div設置一個寬度，然後設置元素的左右外邊距為auto，比如，margin:0 auto。則可以實現div居中顯示。
對於浮動元素，設置其左右外邊距為關鍵字auto是無效的。此時，如果需要設置其居中顯示，可以：1.精確計算其左外邊距並進行設置，實現居中顯示。
2.使用一個居中顯示的div元素包含次浮動元素,
代碼如：<div style=」margin:0 auto;」><div style=」float:left;」></div></div>
2.11 在設置文本的字體時，為什麼建議設置替換字體？
可以使用font-family屬性來指定文本的字體，代碼如下所示：font-family:name/inherit;
此時，name為首選字體的名稱。如果字體名稱有多個單詞，即中間有空格，則需要將字體名稱用一對單引號或者雙引號包圍起來。
但是，如果用戶機器上並沒有安裝name所指定的字體，則會顯示默認字體。因此，如果可以指定一種替代字體，替代字體可以和指定字體不完全相同，相似且不會影響頁面的布局，就可以解決問題了。
我們可以為font-family屬性指定多種字體，且多種字體之間用逗號隔開，這樣可以為頁面指定一個字體列表。如果用戶機器沒有第一種字體，則瀏覽器會查找字體列表中的下一種字體替代默認字體顯示。如果找遍了字體列表還是沒有可以使用的字體，瀏覽器才會使用默認字體顯示頁面。代碼如下所示：
h1{font-family:Georgia,serif;}
此時，如果用戶機器上沒有安裝Georgia，但安裝了Times字體（serif字體系列中的一種字體），瀏覽器就可能對<h1>元素使用Times。盡管Times與Georgia並不完全匹配，但至少足夠接近。
因此，我們建議在所有font-family規則中都提供一個通用字體系列。這樣就提供了一條後路，在用戶機器無法提供與規則匹配的特定字體時，就可以選擇一個通用字體作為替換。
2.12 內聯元素可以實現浮動嗎？
在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。因此，對於內聯元素，如果設置為浮動，會產生和塊級框相同的效果。
2.13 什麼情況下需要額外設置表格的顯示規則？
默認情況下（不額外設置表格的顯示規則時），表格按照自動表格布局進行顯示，即瀏覽器在顯示表之前查看每一個單元格，然後基於所有格的設置計算表單大小，而列的寬度是由列段元個中沒有折行的最寬的內容設定的。此時，單元格的大小會適應內容的大小。
自動表格布局的演算法在表格復雜時會比較慢，這是由於它需要在確定最終的布局之前訪問表格中多有的內容。在不能提前確定每一列的大小時，這種方式會非常適用。
如果額外設置表格的顯示規則，即設置table-layout屬性的值為fixed，則稱為固定表格布局。在固定表格布局中，水平布局僅取決於表格寬度，列寬度，表格邊框寬度，單元格間距，而與單元格的內容無關。瀏覽器將使用某列指定的寬度來計算布局，並使用該寬度計算該列中所有其他單元格的寬度。
固定表格布局與自動表格布局相比，允許瀏覽器更快地對表格進行布局。因為如果指定使用固定表格布局，瀏覽器在接收到第一行後就可以顯示表格。如果表格龐大且已經指定了大小，則會加速表的顯示。
2.14 簡要描述CSS中content屬性的作用
content屬性與:before及:after偽元素配合使用，來插入生成內容，可以在元素之前或之後放置生成的內容。可以插入文本、圖像、引號，並可以結合計數器為頁面元素插入編號。比如，查看如下代碼：
body {counter-reset:chapter;}
h1:before { content:」第」counter(chapter)」章」;}
h1 { counter-increment:chapter;}
使用content屬性，並結合:before選擇器和計數器counter，可以在每個<h1>元素前插入新的內容。
2.15 CSS Sprite是什麼，談談這個技術的優缺點
CSS Sprite是一種網頁圖片應用處理方式，就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的」background-image」，」background-repeat」，」background-position」的組合進行背景定位。
其優點在於：①減少網頁的http請求，提高性能，這也是CSS Sprite最大的優點，
也是其被廣泛傳播和應用的主要原因；
②減少圖片的位元組，多張圖片合並成1張圖片的位元組小於多張圖片的位元組總和；
③較少了命名困擾，只需對一張集合的圖片命名，不需要對每一個小元素進行命名提高製作效率；
④更換風格方便。只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變，維護起來更加方便；
但是CSS Sprite也存在一些不可忽視的缺點：
①圖片合成比較麻煩；
②背景設置時，需要得到每一個背景單元的精確位置；
③維護合成圖片時，最好只是向下加圖片，而不是更改已有圖片。
2.16 對CSS3有了解嗎？列舉幾個CSS3的新特性並簡要描述
CSS3作為CSS技術的升級版本，著力於模塊化發展，將規范分解為一些小的模塊，如選擇器、盒子模型、列表模塊、背景和邊框等；並加入了很多新的模塊和屬性，比如賦值選擇器、文字陰影、邊框圓角、邊框陰影、漸變、過渡、多欄布局、2D/3D轉換、動畫等。
其中，CSS3提供了一些復雜選擇器，用於實現頁面復雜情況下的元素選擇，如屬性選擇器，一些偽類和偽元素選擇器；漸變用於為元素設置漸變效果的背景；轉換可以實現元素的變換，比如位移、縮放、旋轉等；過渡可以實現簡單的動畫效果；動畫屬性則可以實現復雜的動畫，可以實現逐幀製作動畫。
2.17 過渡與動畫的區別是什麼？
過渡屬性transition可以在一定的事件內實現元素的狀態過渡為最終狀態，用於模擬一種過渡動畫效果，但是功能有限，只能用於製作簡單的動畫效果；
動畫屬性animation可以製作類似Flash動畫，通過關鍵幀控制動畫的每一步，控制更為精確，從而可以製作更為復雜的動畫。
2.18 什麼是CSS reset？
CSS reset，又叫做CSS重寫或者CSS重置，用於改寫HTML標簽的默認樣式。
有些HTML標簽在瀏覽器里有默認的樣式，例如p標簽有上下邊距，li標簽有列表標識符號等。這些默認樣式在不同瀏覽器之間也會有差別，例如ul默認帶有縮進的樣式，在IE下，它的縮進是通過margin實現的，而Firefox下，它的縮進是由padding實現的。著必然會帶來瀏覽器兼容問題。
因此，在CSS代碼中，可以使用CSS代碼去掉這些默認樣式，即重新定義標簽樣式，從而覆蓋瀏覽器的CSS默認屬性，即CSS reset。
需要注意的是，在進行樣式重寫時，不建議使用 * 選擇器進行重寫，這樣會降低效率，影響性能。
2.19 如何清除浮動元素所帶來的影響？
浮動定位是指將元素排除在普通流之外，並且將它放置在包含框的左邊或者右邊，但是依舊位於包含框之內。也就是說，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以元素浮動之後，其原有位置不再保留，其他元素的位置會受到影響。
如果需要清除左側或者右側浮動元素帶來的影響，則可以使用clear屬性來設置。另外，包含框呃逆的子元素浮動後，如果包含框沒有設置具體的高度，則其高度會發生變化，此時，可以使用overflow屬性來清除子元素浮動後帶來的影響。
2.20 談談你對瀏覽器兼容性問題的理解
瀏覽器的類型及版本的不同會造成CSS效果不盡相同，因此需要實現瀏覽器兼容，也可以針對不同的瀏覽器編寫不同的CSS。
目前，各主流瀏覽器的新版本，對應W3C的標准支持很好，因此，首先保證代碼符合W3C的標准，這是解決瀏覽器兼容問題的前提。
其次，對於某些支持受限的屬性，針對不同的瀏覽器添加相應的前綴，比如-webkit-、-o-、-moz-。
第三，對於IE的低版本，可以編寫帶有特定前綴的代碼，實現版本識別。比如：
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#f1ee18\9;/*IE6 7 8識別*/
+background-color:#f1ee18;/*IE6 7識別*/
_background-color:#f1ee18;/*IE6識別*/
}
另外，對於特定的兼容性問題，特殊解決。常見的特殊問題有：
1.使用CSS reset：對於有些HTML標簽，瀏覽器默認的margin和padding不同，可以使用CSS代碼改寫默認的樣式效果，從而實現統一
2.IE低版本中，不能使用auto關鍵字實現塊級元素居中顯示，可以改用設置父元素的text-align；
3.子元素設置上外邊距時，父元素需要設置邊框或者外邊距；
4.外邊距合並問題。