最新前端知識(shí)點(diǎn)匯總_第1頁(yè)
最新前端知識(shí)點(diǎn)匯總_第2頁(yè)
最新前端知識(shí)點(diǎn)匯總_第3頁(yè)
已閱讀5頁(yè)，還剩50頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、前端開(kāi)發(fā)面試題2016-7-10、八 、，刖言本文由我收集總結(jié)了一些前端面試題，初學(xué)者閱后也要用心鉆研其中的原理，重要知識(shí)需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成自己的知識(shí)鏈。萬(wàn)不可 投機(jī)取巧，臨時(shí)抱佛腳只求面試僥幸混過(guò)關(guān)是錯(cuò)誤的！也是不可能的！ 不可能的！不可能的！前端還是一個(gè)年輕的行業(yè)，新的行業(yè)標(biāo)準(zhǔn)，框架，庫(kù)都不斷在更新和新增，正如赫門在2015深JS大會(huì)上的前端服務(wù)化之路主題演講 中說(shuō)的一句話：每18至24個(gè)月，前端都會(huì)難一倍”，這些變化使前端 的能力更加豐富、創(chuàng)造的應(yīng)用也會(huì)更加完美。所以關(guān)注各種前端技術(shù)， 跟上快速變化的節(jié)奏，也是身為一個(gè)前端程序員必備的技能之一。希望前端er達(dá)到既能使用也會(huì)表達(dá)，

2、對(duì)理論知識(shí)有自己的理解。可根據(jù)下面的知識(shí)點(diǎn)一個(gè)一個(gè)去進(jìn)階學(xué)習(xí)，形成自己的職業(yè)技能鏈。面試有幾點(diǎn)需注意：1. 面試題目：根據(jù)你的等級(jí)和職位的變化， 入門級(jí)到專家級(jí)，廣度 和深度都會(huì)有所增加。2. 題目類型： 理論知識(shí)、算法、項(xiàng)目細(xì)節(jié)、技術(shù)視野、開(kāi)放性題、 工作案例。3. 細(xì)節(jié)追問(wèn)：可以確保問(wèn)到你開(kāi)始不懂或面試官開(kāi)始不懂為止，這樣可以大大延展題目的區(qū)分度和深度，知道你的實(shí)際能力。因?yàn)檫@種知識(shí)關(guān)聯(lián)是長(zhǎng)時(shí)期的學(xué)習(xí)，臨時(shí)抱佛腳絕對(duì)是記不住的。4. 回答問(wèn)題再棒，面試官（可能是你面試職位的直接領(lǐng)導(dǎo)），會(huì)考慮我要不要這個(gè)人做我的同事？所以態(tài)度很重要、除了能做事， 還要會(huì)做人。（感覺(jué)更像是相親？）5. 資深的

3、前端開(kāi)發(fā)能把a(bǔ)bsolute和relative弄混，這樣的人不要也 罷，因?yàn)閳F(tuán)隊(duì)需要的是：你這個(gè)人具有可以依靠的才能 （靠譜）。前端開(kāi)發(fā)知識(shí)點(diǎn)：HTML&CSS對(duì)Web標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS基本功：布局、盒子模型、選擇器優(yōu)先級(jí)、HTML5、CSS3 FlexboxJavaScript :數(shù)據(jù)類型、運(yùn)算、對(duì)象、Function 、繼承、閉包、作用域、原型鏈、事件、RegExp、JSON Ajax、DOM、BOM內(nèi)存泄漏、跨域、異步裝載、模板引擎、前端MVC路由、模塊化、Canvas、ECMAScript 6、Nodejs其他：移動(dòng)端、響應(yīng)式、自動(dòng)化構(gòu)建、HT

4、TP、離線存儲(chǔ)、WEB安全、優(yōu)化、重構(gòu)、團(tuán)隊(duì)協(xié)作、可維護(hù)、易用性、SEO UED架構(gòu)、職業(yè)生涯、快速學(xué)習(xí)能力作為一名前端工程師，無(wú)論工作年頭長(zhǎng)短都應(yīng)該掌握的知識(shí)點(diǎn)：1、 DOM結(jié)構(gòu)個(gè)節(jié)點(diǎn)之間可能存在哪些關(guān)系以及如何在節(jié)點(diǎn)之間任意移動(dòng)。2、DOM操作一-M可添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)等。3、事件 一一M可使用事件，以及IE和標(biāo)準(zhǔn)DOM事件模型之間存在的差別。4、XMLHttpRequest是什么、怎樣完整地執(zhí)行一次 GET請(qǐng)求、怎樣檢測(cè)錯(cuò)誤。5、嚴(yán)格模式與混雜模式 一-M可觸發(fā)這兩種模式，區(qū)分它們有何意義。6、 盒模型 一一卜邊距、內(nèi)邊距和邊框之間的關(guān)系，及IE8以下版本的瀏覽器 中

5、的盒模型7、塊級(jí)元素與行內(nèi)元素一一么用CSS控制它們、以及如何合理的使用它們8、浮動(dòng)元素一一么使用它們、它們有什么問(wèn)題以及怎么解決這些問(wèn)題。9、HTML與 XHTML 者有什么區(qū)別，你覺(jué)得應(yīng)該使用哪一個(gè)并說(shuō)出理由。10、JSON 乍用、用途、設(shè)計(jì)結(jié)構(gòu)。備注：根據(jù)自己需要選擇性閱讀，面試題是對(duì)理論知識(shí)的總結(jié)，讓自己學(xué)會(huì)應(yīng)該如何表達(dá)。資料答案不夠正確和全面，歡迎歡迎 Star和提交issues 。格式不斷修改更新中。HTML* Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別？ ( 1)、<!DOCTYPE：聲明位于位于 HTML文檔中的第一行，處于 <html> 標(biāo)簽之前。告

6、知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYP環(huán)存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。 (2)、標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。v/html> HTML5為什么只需要寫 ？ HTML5不基于SGML因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來(lái) 規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行)； 而HTML401基于SGML所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔 所使用的文檔類型。行內(nèi)元素有哪些？塊級(jí)元素有哪些？空(void)元素有那些？首先

7、：CSS規(guī)范規(guī)定，每個(gè)元素都有display 屬性，確定該元素的類型，每 個(gè)元素都有默認(rèn)的display 值，女口 div的display 默認(rèn)值為“block ”，則 為 塊級(jí)”元素；span默認(rèn)display 屬性值為“inline ”，是 行內(nèi)”元素。 ( 1) 行內(nèi)元素有： a b spa n img in put select strong(強(qiáng)調(diào)的語(yǔ)氣) (2)塊級(jí)元素有：div ul ol li dl dt dd hl h2 h3 h4p (3)常見(jiàn)的空元素：<br> <hr> <img> <input> <link>&l

8、t;meta>鮮為人知的是：<area> <base> <col> vcommand> <embed> <keygen> vparam><source> <track> <wbr>頁(yè)面導(dǎo)入樣式時(shí)，使用link和import有什么區(qū)別？（1）link屬于XHTML標(biāo)簽，除了加載 CSS外，還能用于定義 RSS定義 rel連接屬性等作用；而mport是CSS提供的，只能用于加載 CSS（2）頁(yè)面被加載的時(shí)，link 會(huì)同時(shí)被加載，而mport引用的CSS會(huì)等到 頁(yè)面被加載完再加載；（3

9、）import是CSS21 提出的，只在IE5以上才能被識(shí)別，而link 是XHTML 標(biāo)簽，無(wú)兼容問(wèn)題；介紹一下你對(duì)瀏覽器內(nèi)核的理解？主要分成兩部分：渲染引擎 （layout engineer或Rendering Engine）禾口JS引擎。渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（HTML XML圖像等等）、整理訊息（例 如加入CSS等），以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相 同。所有網(wǎng)頁(yè)瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的 應(yīng)用程序都需要內(nèi)核。* JS引擎則：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的

10、動(dòng)態(tài)效果。*最開(kāi)始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(dú)立,內(nèi)核就傾向于只指渲染引擎。-常見(jiàn)的瀏覽器內(nèi)核有哪些？* Tride nt 內(nèi)核：IE,MaxTho n, TT,The World,360,搜狗瀏覽器等。又稱MSHTML« Gecko 內(nèi)核：Netscape6 及以上版本，F(xiàn)F, MozillaSuite / SeaMonkey 等« Presto 內(nèi)核：Opera7及以上。 Opera 內(nèi)核原為：Presto，現(xiàn)為：Bli nk;« Webkit 內(nèi)核：Safari , Chrome 等。 Chrome 的：Blink （WebKi

11、t 的分 支）詳細(xì)文章：瀏覽器內(nèi)核的解析和對(duì)比html5有哪些新特性、移除了那些元素？如何處理 HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分HTML和HTML5 ？移除的元素：* 純表現(xiàn)的元素： basefont ，big ，center ，font, s，strike ，tt ，u;* 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset ， no frames ；* HTML5現(xiàn)在已經(jīng)不是SGML的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多 任務(wù)等功能的增加。* 繪畫 can vas;* 用于媒介回放的video 和audio 元素；* 本地離線存儲(chǔ)localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽

12、器關(guān)閉后數(shù)據(jù)不 丟失；* sessio nStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除；* 語(yǔ)意化更好的內(nèi)容元素，比如 article 、footer 、header、nav、 secti on;* 表單控件， calendar 、date、time、email、url 、search;* 新的技術(shù) webworker, websocket, Geolocation;*支持HTML5新標(biāo)簽：IE8/IE7/IE6支持通過(guò) document .createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。當(dāng)然也可以直接使用

13、成熟的框架、比如html5shim;v!-if lt IE 9><script>src二" n/tru nk/html5.js"v/script><!e ndif->*如何區(qū)分HTML5 DOCTYPE聲明新增的結(jié)構(gòu)元素功能元素簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解？用正確的標(biāo)簽做正確的事情。html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器、搜索引擎解析；即使在沒(méi)有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的；搜索引擎的爬蟲(chóng)也依賴于 HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利 于 SEO;使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)

14、站分塊，便于閱讀維護(hù)理解。HTML5的離線儲(chǔ)存怎么使用，工作原理能不能解釋一下？在用戶沒(méi)有與因特網(wǎng)連接時(shí)，可以正常訪問(wèn)站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連 接時(shí)，更新用戶機(jī)器上的緩存文件。原理：HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制（不 是存儲(chǔ)技術(shù)），通過(guò)這個(gè)文件上的解析清單離線存儲(chǔ)資源，這些資源就會(huì)像 cookie 一樣被存儲(chǔ)了下來(lái)。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通 過(guò)被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示。4如何使用：«1、頁(yè)面頭部像下面一樣加入一個(gè) man ifest的屬性；« 2、在cache.manifest文件的編寫離線存儲(chǔ)的資源； CACH

15、EMANIFEST #v0.11 CACHE« js/app.js« css/style.css NETWORK:« resourse/logo.p ng FALLBACK:«/ /offli ne.html* 3、在離線狀態(tài)時(shí)，操作 wi ndow.applicatio nCache進(jìn)行需求實(shí)現(xiàn)。詳細(xì)的使用請(qǐng)參考：有趣的HTML5 :離線存儲(chǔ)瀏覽器是怎么對(duì)HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢？*在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest 屬性，它會(huì)請(qǐng)求manifest 文件，如果是第一次訪問(wèn)app，那么瀏覽器就會(huì)根據(jù) ma nifes

16、t文件的內(nèi)容 下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)。如果已經(jīng)訪問(wèn)過(guò)app并且資源已經(jīng)離線存儲(chǔ)了，那么瀏覽器就會(huì)使用離線的資源加載頁(yè)面，然后瀏覽器會(huì)對(duì)比新的 manifest文件與舊的manifest 文件，如果文件沒(méi)有發(fā)生改變，就不做任 何操作，如果文件改變了，那么就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)。離線的情況下，瀏覽器就直接使用離線存儲(chǔ)的資源。詳細(xì)的使用請(qǐng)參考：有趣的HTML5 :離線存儲(chǔ)請(qǐng)描述一下 cookies , sessi on Storage 禾口 localstorage 的區(qū)cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端（Client Side ） 上的數(shù)據(jù)（通常經(jīng)過(guò)加密

17、）。cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），記會(huì)在瀏覽器 和服務(wù)器間來(lái)回傳遞。sessionStorage禾口 local Storage 不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。存儲(chǔ)大?。篶ookie數(shù)據(jù)大小不能超過(guò)4k。sessionStorage禾口 local Storage 雖然也有存儲(chǔ)大小的限制，但比有期時(shí)間：local Storage刪除數(shù)據(jù)；sessi on Storagecookie瀏覽器關(guān)閉cookie大得多，可以達(dá)到5M或更大。存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除。設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使

18、窗口或iframe有那些缺點(diǎn)？*iframe 會(huì)阻塞主頁(yè)面的Onload事件；*搜索引擎的檢索程序無(wú)法解讀這種頁(yè)面，不利于 SEO;*iframe 和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影 響頁(yè)面的并行加載。«使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe ,最好是通過(guò) javascript«動(dòng)態(tài)給iframe 添加src屬性值，這樣可以繞開(kāi)以上兩個(gè)問(wèn)題。* Label的作用是什么？是怎么用的？* label標(biāo)簽來(lái)定義表單控制間的關(guān)系，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器會(huì)自動(dòng) 將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。« vlabel for

19、二"Name" >Number: v/label>« vinput type二"“text “name二name""="" >« <label> Date: <input type ="text" ></label>* HTML5的form如何關(guān)閉自動(dòng)完成功能？* 給不想要提示的 form 或某個(gè)in put 設(shè)置為 autocomplete二off。如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信？（阿里）* WebSocket、Shared

20、Worker ；* 也可以調(diào)用localstorge 、cookies 等本地存儲(chǔ)方式；* localstorge 另一個(gè)瀏覽上下文里被添加、修改或刪除時(shí)，它都會(huì)觸發(fā)一個(gè) 事件，我們通過(guò)監(jiān)聽(tīng)事件，控制它的值來(lái)進(jìn)行頁(yè)面信息通信；* 注意quirks : Safari 在無(wú)痕模式下設(shè)置localstorge值時(shí)會(huì)拋出QuotaExceededError的異常；webSocket如何兼容低瀏覽器？（阿里）* Adobe Flash Socket 、* ActiveX HTMLFile （IE） 、* 基于multipart 編碼發(fā)送XHR、基于長(zhǎng)輪詢的XHR頁(yè)面可見(jiàn)性(Page Visibility

21、 API )可以有哪些用途？通過(guò)visibilitystate的值檢測(cè)頁(yè)面當(dāng)前是否可見(jiàn)，以及打開(kāi)網(wǎng)頁(yè)的時(shí)間等；在頁(yè)面被切換到其他后臺(tái)進(jìn)程的時(shí)候，自動(dòng)暫停音樂(lè)或視頻的播放；如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？1、map+area 或者 svg2、border-radius3、純js實(shí)現(xiàn)需要求一個(gè)點(diǎn)在不在圓上簡(jiǎn)單算法、獲取鼠標(biāo)坐標(biāo)等等實(shí)現(xiàn)不使用border畫出1px高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果。<divstyle 二"height:1px;overflow:hidden;background:red"></div>網(wǎng)頁(yè)驗(yàn)

22、證碼是干嘛的，是為了解決什么安全問(wèn)題。區(qū)分用戶是計(jì)算機(jī)還是人的公共全自動(dòng)程序?？梢苑乐箰阂馄平饷艽a、刷票、論壇灌水；有效防止黑客對(duì)某一個(gè)特定注冊(cè)用戶用特定程序暴力破解方式進(jìn)行不斷的 登陸嘗試。title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？title屬性沒(méi)有明確意義只表示是個(gè)標(biāo)題，H1則表示層次明確的標(biāo)題，對(duì)頁(yè)面信息的抓取也有很大的影響；strong是標(biāo)明重點(diǎn)內(nèi)容，有語(yǔ)氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí)： vstrong>會(huì)重讀，而<b>是展示強(qiáng)調(diào)內(nèi)容。i內(nèi)容展示為斜體，em表示強(qiáng)調(diào)的文本；« Physical Style Eleme nts -自

23、然樣式標(biāo)簽« b, i, u, s, pre« Sema ntic Style Eleme nts -語(yǔ)義樣式標(biāo)簽« stro ng, em, ins, del, code應(yīng)該準(zhǔn)確使用語(yǔ)義樣式標(biāo)簽,但不能濫用，如果不能確定時(shí)首選使用自然樣式標(biāo)簽。v/b>v/stro ng>CSS.介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？(1)有兩種，IE 盒子模型、W3C盒子模型；* (2)盒模型： 內(nèi)容(co ntent )、填充(padd ing )、邊界(margin )、 邊框(border )；* (3)區(qū) 另ij: IE的cont

24、ent 部分把border禾口 padding 計(jì)算了進(jìn)去；* CSS選擇符有哪些？哪些屬性可以繼承？* * 1.id 選擇器(# myid )* 2. 類選擇器(.myclassname )* 3. 標(biāo)簽選擇器(div , h1, p)* 4.相鄰選擇器(h1 + p)* 5. 子選擇器(ul > li )* 6.后代選擇器(li a)* 7.通配符選擇器(* )* 8. 屬性選擇器(arel = "external")* 9.偽類選擇器(a:hover, li :nth-child ) *可繼承的樣式：font-sizefont-familycolor , UL

25、LI DL DD DT; * 不可繼承的樣式:borderpadd ing marginwidth height ; CSS優(yōu)先級(jí)算法如何計(jì)算？ * 優(yōu)先級(jí)就近原則,同權(quán)重情況下樣式疋義取近者為準(zhǔn)；* *載入樣式以取后載入的疋位為準(zhǔn)；優(yōu)先級(jí)為:*!importa nt > id >class > tagimporta nt比內(nèi)聯(lián)優(yōu)先級(jí)高 CSS3新增偽類有那些？*舉例：*p:first-of-typev/pxp> 兀素。選擇屬于其父元素的首個(gè)<p>元素的每個(gè)*p:last-of-type</p>vp> 兀素。選擇屬于其父兀素的取后</

26、p>vp> 兀素的每個(gè)*p:o nly-of-type</p>vp> 兀素。選擇屬于其父元素唯一的v/p>vp> 兀素的每個(gè)*p:o nly-child</p>vp> 兀素。選擇屬于其父元素的唯-一子元素的每個(gè)*p:n th-child(2)丿元糸。選擇屬于其父元素的第二個(gè)子元素的每個(gè)v/p>vp>*:after在元素之前添加內(nèi)容，也可以用來(lái)做清除浮動(dòng)。*:before在元素之后添加內(nèi)容*:en abled:disabled:checkedv/p>控制表單控件的禁用狀態(tài)單選框或復(fù)選框被選中。div居如何居中div ?

27、如何居中一個(gè)浮動(dòng)元素？如何讓絕對(duì)定位的中？o給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性o div owidth : 200px ;omargin : 0 auto;o o居中一個(gè)浮動(dòng)元素o確定容器的寬高 寬500高300的層o設(shè)置層的外邊距oo .div owidth : 500px ; height : 300px ; / 高度可以不設(shè)omargin : - 150px 0 0 - 250px ;oposition :relative;/相對(duì)定位obackground-color :pink;/方便看效果oleft : 50%otop : 50%o o讓絕對(duì)定位的div居中

28、opositi on: absolute;owidth :1200px;obackground : none;omargin : 0 auto;otop :0;oleft:0;obottom:0;oright:0;display有哪些值？說(shuō)明他們的作用。block象塊類型元素一樣顯示。none缺省值。象行內(nèi)元素類型一樣顯示。inline-b lock象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。list-item象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。table此元素會(huì)作為塊級(jí)表格來(lái)顯示in herit規(guī)定應(yīng)該從父元素繼承 display屬性的值position 的值 relative

29、和 absolute 定位原點(diǎn)是？absolute生成絕對(duì)定位的元素，相對(duì)于值不為static的第一個(gè)父元素進(jìn)行定位。fixed （老IE不支持）生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。relative生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。static默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略top , bottom , left rightz-i ndex聲明）。in herit規(guī)定從父元素繼承 positi on屬性的值。CSS3有哪些新特性？新增各種CSS選擇器(：not (.input):所有class 不是input的節(jié)點(diǎn))圓角(border-radius :8px)

30、多列布局(multi-column layout )陰影和反射(Shadow Reflect )文字特效(text-shadow 、)文字渲染(Text-decorati on)線性漸變(gradie nt )旋轉(zhuǎn)(tran sform )增加了旋轉(zhuǎn)，縮放,定位，傾斜,動(dòng)畫，多背景transform scale (0.85 , 0.90 ) translate ( 0px,- 30px )skew(- 9deg , 0deg Animation請(qǐng)解釋一下CSS3的Flexbox (彈性盒布局模型)，以及適用場(chǎng)景?用純CSS創(chuàng)建一個(gè)三角形的原理是什么？把上、左、右三條邊隱藏掉(顏色設(shè)為tran

31、spare nt )#demo width : 0;height : 0;border-width:20px;border-style:solid;border-color:tran spare nt tran spare nt red tran spare nt;一個(gè)滿屏品字布局如何設(shè)計(jì)？簡(jiǎn)單的方式：上面的div寬100%下面的兩個(gè)div分別寬50%然后用float 或者inline使其不換行即可經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧？* png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.*瀏覽器默認(rèn)的margin和padding不同。解決

32、方案是加一個(gè)全局的* margin : 0; padding : 0;來(lái)統(tǒng)一。* IE6 雙邊距bug:塊屬性標(biāo)簽float 后，又有橫行的margin情況下，在 ie6顯示margin比設(shè)置的大。浮動(dòng) ie 產(chǎn)生的雙倍距離 #box float:left;width :10px; margin : 00 0 100px;這種情況之下IE會(huì)產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式 控制中加入一display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。（_這個(gè)符號(hào)只有ie6會(huì)識(shí)別） 漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。 首先，巧妙的使用“9”這一標(biāo)記，將IE游覽器從所有情況中分離出來(lái)。*

33、接著，再次使用“ +將IE8和IE7、IE6分離開(kāi)來(lái)，這樣IE8已經(jīng)獨(dú)立識(shí) 另嘰css.bbbackgro un d-color:#f1ee18 ; /* 所有識(shí)別 */.backgro un d-color:#00deff9; /*IE6、7、8 識(shí)別*/backgro un d-color:#a200ff;/*IE6 、7 識(shí)別*/_backgro und-color:#1e0bd1;/*IE6 識(shí)別*/* IE 下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性；Firefox 下，只能使用getAttribute()獲取自定義屬性。解決

34、方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性。* IE下,even對(duì)象有x,y屬性，但是沒(méi)有pageX,pageY屬性；Firefox 下,event 對(duì)象有pageX,pageY 屬性，但是沒(méi)有x,y屬性。*解決方法：(條件注釋)缺點(diǎn)是在 IE瀏覽器下可能會(huì)增加額外的 HTTP 請(qǐng)求數(shù)。* Chrome中文界面下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照12px顯示,可通過(guò)加入 CSS 屬性-webkit-text-size-adjust: none;解決。超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具 有hover和active了解決方法是改變 CSS屬性的排列

35、順序:a:L-V-H-A : a:li.li與li之間有看不見(jiàn)的空白間隔是什么原因引起的？有什么解決辦法？行框的排列會(huì)受到中間空白（回車 空格）等的影響，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式，占據(jù)空間，所以會(huì)有間隔，把字符大小設(shè)為o,就沒(méi)有空格了。為什么要初始化CSS樣式。-因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果 沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。-當(dāng)然，初始化樣式會(huì)對(duì)SEO有一定的影響，但魚(yú)和熊掌不可兼得，但力求 影響最小的情況下初始化。*最簡(jiǎn)單的初始化方法：淘寶的樣式初始化代碼：* body,hl, h2,h3, h4,h5,h6,hr,

36、 p,blockquote, dl ,dt , dd,ul , ol, li , pre, form,fieldset ,lege nd, butt on,in put,textareath , td margin : 0;padding:0; «body,butt on ,in put,select, textarea font: 12px/1.5 tahoma,54f53; * h1, h2,h3, h4, h5,h6font-size : 100% * address, cite , dfn ,emvar font-style:normal;* code , kbd, pre

37、, samp fon t-family:courier new, courier,mono space; * small font-size: 12px; * ul , ol list-style:none; * a text-decorati on:non e; * a:hover text-decorati on:un derli ne; padding : 0; margin : 0;（強(qiáng)烈不建議）« sup vertical-alig n:text-top; « sub vertical-align:text-bottom; « lege nd color

38、 : #000;« fieldset , img border : 0; * butt on,in put , select, textarea fon t-size : 100% «tableborder-collapse :collapse; border-spacing : 0;« absolute的con tai ning block（容器塊）計(jì)算方式跟正常流有什么不同？*無(wú)論屬于哪種，都要先找到其祖先元素中最近的position值不為static的元素，然后再判斷：« 1、若此元素為inline元素，則containing block為能夠包含

39、這個(gè)元素生成的第一個(gè)和最后一個(gè)in li nebox 的padd ing box （ 除 margi n,border外的區(qū)域）的最小矩形；* 2、否則，則由這個(gè)祖先元素的padding box 構(gòu)成。* 如果都找不到，則為 in itial c on tai ning block。*補(bǔ)充：* 1. static （默認(rèn)的"relative:簡(jiǎn)單說(shuō)就是它的父元素的內(nèi)容框（即去掉padding的部分）* 2. absolute:向上找最近的定位為 absolute/relative 的元素* 3. fixed:它的 con tai ning block一律為根元素（html/body）

40、，根元素也是 initial containing block* CSS里的visibility屬性有個(gè)collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區(qū)別？* position 跟 display、margin collapse、overflow、float 這些特性相互疊加后會(huì)怎么樣? 對(duì)BFC規(guī)范（塊級(jí)格式化上下文：block formatti ng con text）的理解？ （W3CCSS2.1 規(guī)范中的一個(gè)概念，它是一個(gè)獨(dú)立容器，決定了元素如何對(duì) 其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。）«一個(gè)頁(yè)面是由很多個(gè) Box組成的，元素的類型和display 屬性

41、,決定了這個(gè)Box的類型。« 不同類型的Box,會(huì)參與不同的 FormattingContext （決定如何渲染文檔的容器），因此Box內(nèi)的元素會(huì)以不同的方式渲染，也就是說(shuō)BFC內(nèi)部的元 素和外部的元素不會(huì)互相影響。* css定義的權(quán)重«以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1, class的權(quán)重為10 ,id的權(quán)重為100， 以下例子是演示各種定義的權(quán)重值：« /*權(quán)重為1*/* div - /*權(quán)重為10*/« .class1* /*權(quán)重為100*/ #id1 * /* 權(quán)重為 100+1=101*/* #id1 div * * /* 權(quán)重為 10+1=11

42、*/* .class1 div * /* 權(quán)重為 10+10+1=21*/« .class1 .class2 div 如果權(quán)重相同，則最后定義的樣式會(huì)起作用，但是應(yīng)該避免這種情況出現(xiàn).請(qǐng)解釋一下為什么會(huì)出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)？清除浮 動(dòng)的方式.移動(dòng)端的布局用過(guò)媒體查詢嗎？使用CSS預(yù)處理器嗎？喜歡那個(gè)？* SASS （ SASS LESS沒(méi)有本質(zhì)區(qū)別，只因?yàn)閳F(tuán)隊(duì)前端都是用的SASS）* CSS優(yōu)化、提高性能的方法有哪些？瀏覽器是怎樣解析CSS選擇器的？在網(wǎng)頁(yè)中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？* margin和padding分別適合什么場(chǎng)景使用？-抽離樣式模塊怎么寫，說(shuō)

43、出思路，有無(wú)實(shí)踐經(jīng)驗(yàn)？阿里航旅的面試題.元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎？.全屏滾動(dòng)的原理是什么？用到了 CSS的那些屬性？.什么是響應(yīng)式設(shè)計(jì)？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低 版本的IE？-視差滾動(dòng)效果，如何給每頁(yè)做不同的動(dòng)畫？（回到頂部，向下滑 動(dòng)要再次出現(xiàn)，和只出現(xiàn)一次分別怎么做？）« :before和：after中雙冒號(hào)和單冒號(hào) 有什么區(qū)別？解釋一下這 2 個(gè)偽元素的作用。如何修改chrome記住密碼后自動(dòng)填充表單的黃色背景？«你對(duì)line-height是如何理解的？設(shè)置元素浮動(dòng)后，該元素的 display值是多少？（自動(dòng)變成 display:bloc

44、k） 怎么讓Chrome支持小于12px的文字？讓頁(yè)面里的字體變清晰，變細(xì)用 CSS怎么做？（-webkit-fo nt-smoothi ng: an tialiased;）* font-style屬性可以讓它賦值為“oblique ” oblic是什么意思？ positi on:fixed;在 an droid 下無(wú)效怎么處理？如果需要手動(dòng)寫動(dòng)畫，你認(rèn)為最小時(shí)間間隔是多久，為什么？（阿 里）多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60* 1000ms = 16.7msdisplay:inline-block 什么時(shí)候會(huì)顯示間隙？（攜程）« 移除空格、

45、使用 margin 負(fù)值、使用 font-size: 0、letter-spacing、word-spaci ngoverflow: scroll時(shí)不能平滑滾動(dòng)的問(wèn)題怎么處理？有一個(gè)高度自適應(yīng)的div，里面有兩個(gè)div，一個(gè)高度100px，希 望另一個(gè)填滿剩下的高度。 png、jpg、gif這些圖片格式解釋一下，分別什么時(shí)候用。有沒(méi)有 了解過(guò)webp ？什么是Cookie隔離？（或者說(shuō)：請(qǐng)求資源的時(shí)候不要讓它帶cookie怎么做）如果靜態(tài)文件都放在主域名下，那靜態(tài)文件請(qǐng)求的時(shí)候都帶有的cookie的數(shù)據(jù)提交給server的，非常浪費(fèi)流量，所以不如隔離開(kāi)。因?yàn)閏ookie有域的限制，因此不能跨域

46、提交請(qǐng)求，故使用非主要域名的時(shí) 候，請(qǐng)求頭中就不會(huì)帶有cookie數(shù)據(jù)，這樣可以降低請(qǐng)求頭的大小，降低請(qǐng)求時(shí)間，從而達(dá)到降低整體請(qǐng)求延時(shí)的 目的。同時(shí)這種方式不會(huì)將 cookie 傳入 Web Server，也減少了 Web Server對(duì) cookie的處理分析環(huán)節(jié)，提高了 webserver的http請(qǐng)求的解析速度。style標(biāo)簽寫在body后與body前有什么區(qū)別？什么是CSS預(yù)處理器/后處理器？-預(yù)處理器例如：LESS Sass、Stylus，用來(lái)預(yù)編譯 Sass或less，增強(qiáng) 了 css代碼的復(fù)用性，還有層級(jí)、mix in、變量、循環(huán)、函數(shù)等，具有很方便的UI組件模塊化開(kāi)發(fā)能力，極

47、大的提高工作效率。-后處理器例如：PostCSS，通常被視為在完成的樣式表中根據(jù) CSS規(guī)范處 理CSS,讓其更有效；目前最常做的是給CSS屬性添加瀏覽器私有前綴，實(shí)現(xiàn)跨瀏覽器兼容性的問(wèn)題。JavaScript-介紹js的基本數(shù)據(jù)類型。Undefined 、Null、Boolean、Number、String介紹js有哪些內(nèi)置對(duì)象？Object 是JavaScript中所有對(duì)象的父對(duì)象數(shù)據(jù)圭寸裝類對(duì)象：Object、Array、Boolean、Number 禾口 String其他對(duì)象：Function 、Arguments、Math、Date、RegExp、Error說(shuō)幾條寫JavaScrip

48、t的基本規(guī)范？1. 不要在同一行聲明多個(gè)變量。2請(qǐng)使用=/!= 來(lái)比較true / false 或者數(shù)值3. 使用對(duì)象字面量替代new Array這種形式4. 不要使用全局函數(shù)。5. Switch語(yǔ)句必須帶有default 分支6. 函數(shù)不應(yīng)該有時(shí)候有返回值，有時(shí)候沒(méi)有返回值。7. For循環(huán)必須使用大括號(hào)8. If語(yǔ)句必須使用大括號(hào)9. for -in循環(huán)中的變量 應(yīng)該使用var關(guān)鍵字明確限定作用域，從而避免作 用域污染。JavaScript原型，原型鏈 ？有什么特點(diǎn)？每個(gè)對(duì)象都會(huì)在其內(nèi)部初始化一個(gè)屬性，就是prototype（ 原型），當(dāng)我們?cè)L問(wèn)一個(gè)對(duì)象的屬性時(shí)，如果這個(gè)對(duì)象內(nèi)部不存在這個(gè)

49、屬性，那么他就會(huì)去prototype 里找這個(gè)屬性,這個(gè) prototype 又會(huì)有自己的 prototype ，于是就這樣一直找下去，也就是我們平時(shí)所說(shuō)的原型鏈的概念。關(guān)系：totype = instanee._proto_特點(diǎn)：« JavaScript 對(duì)象是通過(guò)引用來(lái)傳遞的，我們創(chuàng)建的每個(gè)新對(duì)象實(shí)體中并沒(méi) 有一份屬于自己的原型副本。當(dāng)我們修改原型時(shí)，與之相關(guān)的對(duì)象也會(huì)繼承 這一改變。當(dāng)我們需要一個(gè)屬性的時(shí)，Javascript引擎會(huì)先看當(dāng)前對(duì)象中是否有這個(gè)屬性，如果沒(méi)有的話，就會(huì)查找他的Prototype對(duì)象是否有這個(gè)屬性，如此遞

50、推下去，一直檢索到Object內(nèi)建對(duì)象。fun cti onFun c()F ="Sean"Fun totype.get Info =function () return this .name;var person 二 new Func();/現(xiàn)在可以參考var person =Object.create(oldObject);con sole .log(perso n.getl nfo();/ 它擁有了 Fu nc 的屬性和方法/"Sea n"con soleo g(F un totype);/

51、Func n ame二"Sea n", get Info二fun cti on()JavaScript有幾種類型的值？，你能畫一下他們的內(nèi)存圖嗎？棧：原始數(shù)據(jù)類型(Undefined ， Null ， Boolean，Number、String )堆：引用數(shù)據(jù)類型(對(duì)象、數(shù)組和函數(shù))兩種類型的區(qū)別是：存儲(chǔ)位置不同；原始數(shù)據(jù)類型直接存儲(chǔ)在棧(stack)中的簡(jiǎn)單數(shù)據(jù)段，占據(jù)空間小、大小固 定，屬于被頻繁使用數(shù)據(jù)，所以放入棧中存儲(chǔ)；引用數(shù)據(jù)類型存儲(chǔ)在堆（heap）中的對(duì)象，占據(jù)空間大、大小不固定，如果存儲(chǔ) 在棧中，將會(huì)影響程序運(yùn)行的性能；引用數(shù)據(jù)類型在棧中存儲(chǔ)了指針，該指 針指

52、向堆中該實(shí)體的起始地址。當(dāng)解釋器尋找引用值時(shí)，會(huì)首先檢索其在棧中的地址，取得地址后從堆中獲得實(shí)體Javascript如何實(shí)現(xiàn)繼承？1、構(gòu)造繼承2、原型繼承3、實(shí)例繼承4、拷貝繼承方法去實(shí)現(xiàn)較簡(jiǎn)單，建議使用構(gòu)造函原型 prototype 機(jī)制或 apply 禾口 call 數(shù)與原型混合方式。fun ctio nPare nt ()this .name = 'wang'* «functionChild ()«this .age =28; « Ctotype =new Pare nt();/ 繼承了 Pare nt，通過(guò)原型«

53、var demo = new Child();«alert(demo.age);«alert();/得到被繼承的屬性 « JavaScript繼承的幾種實(shí)現(xiàn)方式？o參考：構(gòu)造函數(shù)的繼承，非構(gòu)造函數(shù)的繼承；javascript創(chuàng)建對(duì)象的幾種方式？javascript創(chuàng)建對(duì)象簡(jiǎn)單的說(shuō)，無(wú)非就是使用內(nèi)置對(duì)象或各種自定義對(duì)象，當(dāng)然還可以用JSON;但寫法有很多種，也能混合使用。1、對(duì)象子面量的方式person二firstname:"Mark" ,lastname:"Yun" ,age: 25,eyecolor: &

54、quot;black" ;*2、用function來(lái)模擬無(wú)參的構(gòu)造函數(shù)fun cti onPers on ()var person二 new Person。；/ 定義一個(gè) function，如果使用 new"實(shí)例化"，該function可以看作是一個(gè)C="Mark"pers on .age二"25"pers on. work=fun ctio n()alert(pers on.n ame+" hello." );pers on. work();3、 用function來(lái)模擬參

55、構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)(用this關(guān)鍵字定義構(gòu)造的上下 文屬性)functionPet (name,age,hobby)this .name二name; /this 作用域：當(dāng)前對(duì)象this .age=age;this .hobby二hobby;this .eat= function()alert("我叫"+this .name+",我喜歡"+this .hobby+ ",是個(gè)程序員");var maidou = new Pet("麥兜",25, "coding" ); / 實(shí)例化、創(chuàng)建對(duì)象maidou

56、.eat(); / 調(diào)用 eat 方法4、用工廠方式來(lái)創(chuàng)建(內(nèi)置對(duì)象)var wcDog = new Object ();wcDog .name="旺財(cái)"；wcDog.age二3;wcDog.work二fun cti on()alert( "我是"+wcD+",汪汪汪”); wcDog.work();5、用原型方式來(lái)創(chuàng)建fun cti on Dog()D="旺財(cái)"二fun cti on ()alert( this .name+"是個(gè)吃貨”)；var wangcai = new Dog();wan gcai.eat();5、用混合方式來(lái)創(chuàng)建fun cti on Car( name,price)this .

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論