【www.2radtransport24.com--考試資訊】
web前端面試題及答案5篇
web前端面試題及答案(1)
WEB前端面試題（考試時間：60分鐘）
你好，歡迎你參加藍朗集團面試。我們衷心地祝愿你通過考核！期待你加入具有“拼搏、創新、誠信、激情、高效、敬業”精神的藍朗集團！藍朗愿為你開啟職業生涯的新篇章，期待與你一起辛勤耕耘，共同收獲成功喜悅！
第一部分（技能知識）
//注:所有JS題目均使用原生態JS,不允許使用框架
1.如下兩個div元素垂直距離是多少？
2.編寫css讓div2在div1的右下角？
3.怎么樣讓一個已知寬高的div元素水平居中？
4.以下的div背景是什么顏色的？
.a{background-color:#FF0000;}
.b{background-color:#00FF00;}
5.用css給如下按鈕設置背景圖片bg.jpg，并隱藏按鈕上的文字？
6.如何用CSS控制背景圖片定位,不滾動(當背景圖片小于容器大小)
7.將如下字符串轉變成json對象
varstr="{a:1,b:2,c:true,d:"hello"}";
8.在如下數組第二個元素后插入一個元素3
varar=[1,2,4,5,6];
9.請根據每個元素的i屬性，由小到大，排序如下數組
varar=[{i:5,v:1},{i:2,v:4},{i:3,v:2},{i:1,v:5},{i:4,v:3}];
10.以空格字符串作為分隔字符串，將如下字符串拆分成數組（每個元素不能含有空格字符）
varstr="a b c 20 d e f g 123";
11.請將如下數據庫表的記錄用json表示出來
id name city
--------------------------
1 Tom London
2 John Newyork
3 Alice Paris
12.編寫代碼讓f1繼承f2的所有成員
function f1(){
this.a1=1;
this.b1=2;
}
function f2(){
this.a2=3;
this.b2=4;
}
13.把16進制顏色轉變成rgb顏色，如:#FFFFFF等同rgb(255,255,255)
第二部分
1. 最近一個月閱讀的書籍？
2. 從上一家公司的工作感悟是什么？
第三部分
1. 你認為做為前端人員應該具備的素質和條件是哪些？
2.請簡述你的個人價值觀及職業規劃。
web前端面試題及答案(2)
一.修改以下css樣式，簡述您的理由：
1. div.container{
2. width:500px;
3. background-image:url(/img/sprite.png);
4. background-repeat:no-repeat;background-position:0px -50px;
5. }
6. div.container ul#news-list, div.container ul#news-list li{
7. margin:0px;
8. padding:0px;
9. }
10. div.container ul#news-list li{
11. padding-left:20px;
12. background-image:url(/img/sprite.png);
13. background-repeat:no-repeat;
14. background-position:-100px 0px;
15. }
16. a{
17. font-size:14px;
18. font-weight:bold;
19. line-height:150%;
20. color:#000000;
21. }
復制代碼
二.使用一個JSON對象，描述下面一句話：? ???小明22歲，來自杭州，愛好看電影和旅游。小明有兩個姐姐，一個叫小紅，25歲，是一名經理。另一個叫小蘭，23歲，是一名數學老師。三.為本地數組編寫一個原型，實現將數組中具有相同元素的元素刪除（意思是只保留一個），并返回刪除后的數組。四.
1.
復制代碼
(1) 說說上面一行語句的優缺點。(2) 編寫一個通用的事件注冊函數，看下面的代碼：
1. function?addEvent(element,type,handle){//在這里編寫您的代碼
2.
3. }
復制代碼
五. 寫出下圖所示 html 內容，要求：遵循 xhtml1.0 規范，符合 web 語義。?
web前端面試題及答案(3)
1．怎樣使用JavaScript寫div或span
2．div和span有什么區別？
3．JavaScript中對象沒有定義就使用，會出現什么問題？返回JavaScript中的什么類型?
4．JavaScript中有幾種數據類型？分別是什么？
5．JavaScript中有trim函數嗎？如果沒有如何給String類型加入trim函數？
6．JavaScript中prototype關鍵字有什么作用？
7．JavaScript中有繼承的概念嗎？
8．你遇到瀏覽器兼容性問題嗎？舉個列子？
9．JavaScript中獲取HTML元素有幾種方式？
10．JavaScript總isNan是什么意思？
11．JavaScript程序如何調試？
12．你使用過正則表達式嗎？使用正則表達式都做什么？正則表單是在JavaScript中可 以使用，在Java中可以使用嗎？其他語言可以使用嗎？
13．在HTML中readOnly和Disabled有什么共同點和不同點？
14．什么是 JS 事件冒泡
1．Ajax核心對象叫什么名字？
2．Ajax和Java有關嗎？
3．Ajax運行在什么地方？
4．Ajax有幾個狀態？
5．Ajax有什么優點？
6．Ajax使用的時候需要注意些什么？
7．你們項目中都用Ajax做過什么？
8．什么是異步？什么是同步？
9．什么是callback機制？
要點：對Web標準的理解、瀏覽器差異、CSS基本功：布局、盒子模型、選擇器優先級及使用、HTML5、CSS3技術等
Doctype作用? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
（1）、 聲明位于文檔中的最前面，處于 標簽之前。告知瀏覽器的解析器， 用什么文檔類型 規范來解析這個文檔。 （2）、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行。（3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。（4）、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
2.行內元素有哪些？塊級元素有哪些？
（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.CSS的盒子模型？
（1）兩種， IE 盒子模型、標準 W3C 盒子模型；IE 的content部分包含了 border 和 pading;（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).
4.link 和@import 的區別是?
（1）、link屬于XHTML標簽，而@import完全是CSS提供的一種方式; （2）、頁面被加載的時候，link-會同時被加載，而@import引用的CSS會等到頁面被加載完再加載; （3）、import只有在IE5以上的才能識別，而link是XHTML標簽，無兼容問題; （4）、link方式的樣式的權重 高于@import的權重.
5.CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ em和px有什么關系？
* ID 和 Class; * Class 可繼承、 font-size font-family color, 列表 UL LI DL DD DT 可繼承; * 不可繼承 ：border padding margin width height ; * 優先級就近原則，樣式定義最近者為準; * 載入樣式以最后載入的定位為準;
優先級為:
!important > id > class > tag important 比 內聯優先級高 如果父元素定義字體大小12px，子元素定義1em，大小就是12px。
三、如何讓2個并列的div自動等高（不設高度）注：如果能寫出3種常見方法固然最好，但最好寫一下各自優缺點，否則面試時肯定會問你為什么這樣
寫
1、背景模擬法（假高度），按照尺寸制作背景，平鋪，當內容增多時，背景就會向下縱向重復，看起
來就向左右兩個div都自動向下延伸了一樣。
2、表格嵌套法（不難理解，表格都是等高的，就是在div中嵌套表格）
3、內外補丁法（最推薦的方法，因為只用css實現的，但初學者不易理解）* { margin:0; padding:0; }#wrap {overflow:hidden; (這行代碼是重點，否則你會看到頁面很長很長)padding:0;padding-left:180px;（內補?。?/br>}#left,#right {height:auto;margin-bottom:-10000px;（外補?。?/br>padding-bottom:10000px;（內補?。?/br>}#left {display:inline;float:left;width:180px;margin-left:-180px;（外補?。?/br>background: #0CF;}#right{float:right;width:100%;background: #FC6;}
這里說一下內外補丁，其實也沒那么難理解，我的理解就是相互抵消。多用用margin負值，你會了解這
個原理的。
6.如何居中div,如何居中一個浮動元素?
給div設置一個寬度，然后添加margin:0 auto屬性
div{ width:200px; margin:0 auto; }
設置容器的浮動方式為相對定位 確定容器的寬高 寬500 高 300 的層 設置層的外邊距
.Div { Width:500px ; height:300px; Margin: -150px 0 0 -250px; position: absolute; left:50%; top:50%; }
7.經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，hack 的技巧 ？
* IE瀏覽器的內核Trident、 Mozilla的Gecko、google的WebKit、Opera內核Presto； * png24為的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8. * 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。 * IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。 解決方案是在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性。 * 浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px; //這種情況之下IE會產生20px的距離，這時需要設置display:inline; //使浮動忽略} * 漸進識別的方式，從總體中逐漸排除局部。 * 首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。 ```css .bb{ background-color:#f1ee18;/*所有識別*/ .background-color:#00deff\9; /*IE6、7、8識別*/ +background-color:#a200ff;/*IE6、7識別*/ _background-color:#1e0bd1;/*IE6識別*/ } ``` * IE下,可以使用獲取常規屬性的方法來獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統一通過getAttribute()獲取自定義屬性. * IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性. * （條件注釋）缺點是在IE瀏覽器下可能會增加額外的>
web前端面試題及答案(4)
1Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?
HTML5 為什么只需要寫 ？
行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
頁面導入樣式時，使用link和@import有什么區別？
介紹一下你對瀏覽器內核的理解？
常見的瀏覽器內核有哪些？
html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
簡述一下你對HTML語義化的理解？
HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
請描述一下 cookies，sessionStorage 和 localStorage 的區別？
iframe有那些缺點？
Label的作用是什么？是怎么用的？（加 for 或 包裹）
HTML5的form如何關閉自動完成功能？
如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
webSocket如何兼容低瀏覽器？(阿里)
頁面可見性（Page Visibility）API 可以有哪些用途？
如何在頁面上實現一個圓形的可點擊區域？
實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
網頁驗證碼是干嘛的，是為了解決什么安全問題？
tite與h1的區別、b與strong的區別、i與em的區別？
介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？
CSS選擇符有哪些？哪些屬性可以繼承？
CSS優先級算法如何計算？
CSS3新增偽類有那些？
如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
display有哪些值？說明他們的作用。
position的值relative和absolute定位原點是？
CSS3有哪些新特性？
請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
用純CSS創建一個三角形的原理是什么？
一個滿屏 品 字布局 如何設計?
常見兼容性問題？
li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？
為什么要初始化CSS樣式。
absolute的containing block計算方式跟正常流有什么不同？
CSS里的visibility屬性有個collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區別？
position跟display、margin collapse、overflow、float這些特性相互疊加后會怎么樣？
對BFC規范(塊級格式化上下文：block formatting context)的理解？
CSS權重優先級是如何計算的？
請解釋一下為什么會出現浮動和什么時候需要清除浮動？清除浮動的方式
移動端的布局用過媒體查詢嗎？
使用 CSS 預處理器嗎？喜歡那個？
CSS優化、提高性能的方法有哪些？
瀏覽器是怎樣解析CSS選擇器的？
在網頁中的應該使用奇數還是偶數的字體？為什么呢？
margin和padding分別適合什么場景使用？
抽離樣式模塊怎么寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
元素豎向的百分比設定是相對于容器的高度嗎？
全屏滾動的原理是什么？用到了CSS的那些屬性？
什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？
視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎么做？）
::before 和 :after中雙冒號和單冒號 有什么區別？解釋一下這2個偽元素的作用。
如何修改chrome記住密碼后自動填充表單的黃色背景 ？
你對line-height是如何理解的？
設置元素浮動后，該元素的display值是多少？（自動變成display:block）
怎么讓Chrome支持小于12px 的文字？
讓頁面里的字體變清晰，變細用CSS怎么做？（-webkit-font-smoothing: antialiased;）
font-style屬性可以讓它賦值為“oblique” oblique是什么意思？
position:fixed;在android下無效怎么處理？
如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里）
display:inline-block 什么時候會顯示間隙？(攜程)
overflow: scroll時不能平滑滾動的問題怎么處理？
有一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過webp？
什么是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎么做）
style標簽寫在body后與body前有什么區別？
介紹JavaScript的基本數據類型。
說說寫JavaScript的基本規范？
JavaScript原型，原型鏈 ? 有什么特點？
JavaScript有幾種類型的值？（堆：原始數據類型和 棧：引用數據類型），你能畫一下他們的內存圖嗎？
Javascript如何實現繼承？
Javascript創建對象的幾種方式？
Javascript作用鏈域?
談談This對象的理解。
eval是做什么的？
什么是window對象? 什么是document對象?
null，undefined的區別？
寫一個通用的事件偵聽器函數(機試題)。
["1", "2", "3"].map(parseInt) 答案是多少？
關于事件，IE與火狐的事件機制有什么區別？ 如何阻止冒泡？
什么是閉包（closure），為什么要用它？
javascript 代碼中的"use strict";是什么意思 ? 使用它區別是什么？
如何判斷一個對象是否屬于某個類？
new操作符具體干了什么呢?
用原生JavaScript的實現過什么功能嗎？
Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
對JSON的了解？
[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1
web前端面試題及答案(5)
web前端面試題
1. js的中的"=", "==", "===" 的區別
- "="：賦值
- "==": 相等運算符，判斷是否相等
- "===": 嚴格運算符,判斷數值及類型是否相等
2. js中數組循環處理的方法有那些，及其區別
方法：
- map(),forEeach()
區別：
map(): 循環遍歷數組中的每一項,但返回新的數組
forEach(): 循環遍歷數組中的每一項,但沒有返回值
3. 如何解決發布版本，前端緩存的問題
- 了解面試者項目的構建工具的使用
4. 最近使用的技術框架及其組件有那些
- 了解面試者使用react的熟練程序
5. 前后端分離，你是如何模擬業務數據
- 根據策劃稿或原型稿，與后端定義API接口。
- 使用mockjs模擬API接口的輸入，輸出
6. 談談你如何定位前端的性能問題，及優化。
定位性能問題：
- 工具：chrome的開發工具等
- 查看請求次數及響應時間
- 查看瀏覽器渲染頁面完成最大時間
優化：
- 資源（css,js,image等）合并與壓縮減少請求數
- 緩存策略
- 圖片資源懶加載
- gzip壓縮
7. 你遇到過比較難的技術問題是？你是如何解決的？
- 了解面試者遇到問題的思路及其邏輯
8. 當你非常忙碌的時候，你如何繼續完成任務？
- 了解面試者為了按時完成任務而用那些幫助自己規劃好自己的時間并保持專注的技巧。
文檔為doc格式
