2023年最新前端開發面試題（面霸題庫）
歡迎加入j**ascript前端技術，群號為:85088298 本人部落格已經遷移至
the last time that refresh: 2014/3/11 13:47:07
本文總結了一些常見前端面試（多數源於網路），希望閱後也要用心鑽研其中的原理，重要知識需要系統學習，透徹學習，形成自己的知識鏈。
萬不可投機取巧。只求當時過關，非長久之計也！
面試有幾點需要注意：（**程劭非老師 github:@wintercn | weibo:寒冬winter）
1. 面試題目： 根據你的等級和職位變化，入門級到專家級：範圍↑、深度↑、方向↑。
2. 題目型別： 技術視野、專案細節、理論知識型題，演算法題，開放性題，案例題。
3. 進行追問： 可以確保問到你開始不懂或者面試官開始不懂為止，這樣可以大大延展題目的區分度和深度，知道你的實際能力。因為這種關聯知識是長時期的學習，絕對不是臨時記得住。
4. 回答問題再棒，面試官（一般是你的直接領導面試），會考慮我要不要這個人做我的同事？所以態度很重要。（感覺像是相親一樣）
5. 資深的工程師能把absolute和relative弄混，這樣的人不要也罷，因為團隊需要的你這個人具有可以依靠的才能（靠譜）。
另外：資料剛剛收集，覆蓋面比較廣，包括了web端、移動端的知識點，根據你自己的需要選擇性閱讀即可。
再次提一下： 看或背面試題不像學校考試，死記硬背是沒什麼用的，看面試題是對理論知識的總結讓自己表達的時候知道怎麼說。
答案有些不夠正確和全面，問題問的不夠好，歡迎補充你所知道的答案、技巧、題目；最好是現在網上找不到的。
格式不斷修改更新中。
html、css部分
要點：對web標準的理解、瀏覽器差異、css基本功：布局、盒子模型、選擇器優先順序及使用、html5、css3、移動端開發技術等
作用? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
（1）、 宣告位於文件中的最前面，處於 標籤之前。告知瀏覽器的解析器，用什麼文件型別規範來解析這個文件。
（2）、嚴格模式的排版和 js 運作模式是以該瀏覽器支援的最高標準執行。
（3）、在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）、doctype不存在或格式不正確會導致文件以混雜模式呈現。
2.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
（1）css規範規定，每個元素都有display屬性，確定該元素的型別，每個元素都有預設的display值，比如div預設display屬性值為「block」，成為「塊級」元素；span預設display屬性值為「inline」，是「行內」元素。
（2）行內元素有：a b span img input select strong（強調的語氣） 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：
鮮為人知的是：
的盒子模型？
（1）兩種， ie 盒子模型、標準 w3c 盒子模型；ie 的content部分包含了 border 和 pading;
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).
和@import 的區別是?
（1）、link屬於xhtml標籤，而@import是css提供的;
（2）、頁面被載入的時，link會同時被載入，而@import引用的css會等到頁面被載入完再載入;
（3）、import只在ie5以上才能識別，而link是xhtml標籤，無相容問題;
（4）、link方式的樣式的權重高於@import的權重.
選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？ css3新增偽類有那些？
* 選擇器（ # 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）
* 可繼承： font-size font-family color, ul li dl dd dt;
* 不可繼承 ：border padding margin width height ;
* 優先順序就近原則，樣式定義最近者為準;
* 載入樣式以最後載入的定位為準;
優先順序為:
!important > id > class > tag
important 比內聯優先順序高
css3新增偽類舉例：
p:first-of-type 選擇屬於其父元素的首個 元素的每個 元素。
p:last-of-type 選擇屬於其父元素的最後 元素的每個 元素。
p:only-of-type 選擇屬於其父元素唯一的 元素的每個 元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 元素。
:enabled、:disabled 控制表單控制項的禁用狀態。
:checked，單選框或核取方塊被選中。
6.如何居中div,如何居中乙個浮動元素?
給div設定乙個寬度，然後新增margin:0 auto屬性
div居中乙個浮動元素
確定容器的寬高寬500 高 300 的層
設定層的外邊距
.div
7.瀏覽器的核心分別是什麼?經常遇到的瀏覽器的相容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？
* ie瀏覽器的核心trident、 mozilla的gecko、google的webkit、opera核心presto；
* png24為的**在ie6瀏覽器上出現背景，解決方案是做成png8.
* 瀏覽器預設的margin和padding不同。解決方案是加乙個全域性的*來統一。
* ie6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大。
浮動ie產生的雙倍距離 #box
前端面試題
1 ie6的雙倍邊距bug指的是什麼？怎麼解決？答案 在ie6中，乙個居左 或居右 浮動的元素放置進乙個容器盒 box 並在浮動元素上使用了左邊距 或右邊距 在ie6內便產生雙倍邊距。解決方法是 設定display inline 2 web標準中定義id與class有什麼區別嗎？答案 web標準中是...
web前端面試題目
1 css div開發web頁面的優勢有哪些？優點 1 div css，這個網頁設計模式中，div承擔了網頁的內容，css承擔了網頁的樣式。這樣就使網頁的內容和樣式的分離開來。有利於頁面的維護公升級。2 有助於提高搜尋引擎親和力 快速找到需要的資料，而不是像在table中一層層的查詢 3 有助於頁面...
web前端面試題大全
1doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?html5 為什麼只需要寫 行內元素有哪些？塊級元素有哪些？空 void 元素有那些？頁面匯入樣式時，使用link和 import有什麼區別？介紹一下你對瀏覽器核心的理解？常見的瀏覽器核心有哪些？html5有哪些新特性 移除了那些元素？...