1、Web 前端開發面試題匯總1天前653瀏覽前端面試題匯總HTML&CSS1. 常用那幾種瀏覽器測試有哪些內核（LayOutEngine）（Q1）瀏覽器：IE，ChrOme，FireFOX，Safari， OPera。（Q2）內核：Trident，Gecko，PreStO，Webkit。2. 說下行內元素和塊級元素的區別行內塊元素的兼容性使用（IE8以下）行內元素：會在水平方向排列，不能包含塊級元素，設置Width無效，height無效（可以設置Iine-height），margin 上下無效，Padding 上下無效。塊級元素：各占據一行，垂直方向排列。從新行開始結束接著一個斷行。兼容性：di

2、splay:inline-block;display:inline;ZOOm:1;3. 清除浮動有哪些方式比較好的方式是哪一種（1）父級 div 定義 height。（2）結尾處加空div標簽clear:both。（3）父級div定義偽類:after和zoom。（4）父級 div 定義 Overflowhdden 。（5）父級 div 定義 OVerflow:auto 。（6）父級div也浮動，需要定義寬度。（7）父級 div 定義 display:table 。（8）結尾處加br標簽clear:both。總結：比較好的是第3種方式，簡潔方便。常用的屬性有哪些分別有什么作用常用的屬性： box

3、-siz in g:C onten t-boxborder-box in herit;作用：content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和 邊框（元素默認效果）。border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定 的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。作用標準模式與兼容模式各有什么區別（Q1）告知瀏覽器的解析器用什么文檔標準解析這個文檔 。DoCTYPE不存在或格式不正確會 導致文檔以兼容模式呈現。（Q2）標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁

4、面以 寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點無法工作。為什么只需要寫VDOCtyPehtmlHTML5不基于SGML ,因此不需要對DTD進行引用；但是需要doctype來規范瀏覽器的行為 （讓瀏覽器按照它們應該的方式來運行）。而基于SGML,所以需要對DTD進行引用，才能告知瀏 覽器文檔所使用的文檔類型。7. 頁面導入樣式時，使用link和import有什么區別（1）link屬于XHTML標簽，除了加載CSS夕卜，還能用于定義RSS,定義rel連接屬性等作用； 而import是CSS提供的，只能用于加載 CSS;（2） 頁面被加載的時，Iink會同時被加載，而import引

5、用的CSS會等到頁面被加載完再加載；（3） import是提出的，只在IE5以上才能被識別，而Iink是XHTML標簽，無兼容問題。總之，Iink要優于import。8. 介紹一下你對瀏覽器內核的理解IE 瀏覽器的內核 Trident、Mozilla 的 Gecko、ChrOme 的 Blink （WebKit 的分支）、OPera 內 核原為PreStO,現為 Blink ；內核主要分成兩部分：渲染弓 I擎（layoutengineer 或 RenderingEngine） 和 JS 弓 I擎渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等）， 以及計算

6、網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解 釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。JS引擎則：解析和執行javascript來實現網頁的動態效果。最開始渲染引擎和JS引擎并沒有區分 的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。有哪些新特性如何處理 HTML5新標簽的瀏覽器兼容問題如何區分HTML 和 HTML5(QI)HTML5現在已經不是SGML的子集，主要是關于圖像，位置，存儲，多任務等功能的增 加。(1) 繪畫 Canvas;(2) 用于媒介回放的VideO

7、和audio元素；(3) 本地離線存儲IOCalStOrage長期存儲數據，瀏覽器關閉后數據不丟失；(4)SeSSiOnStorage的數據 在瀏覽器關閉后自動刪除；(5)語意化更好的內容元素，比如 article、footer、header、nav、SeCtiOn;(6)表單控件，calendar、 date、time、email、url、search;(7)新的技術 WebWOrker,websocket,Geolocation;(Q2)IE8IE7IE6支持通過方法產生的標簽，可以利用這一特性讓這些瀏覽器支持 HTML5新標簽, 瀏覽器支持新標簽后，還需要添加標簽默認的樣式。也可以直接使

8、用成熟的框架、比如html5shim，10.簡述一下你對 HTML語義化的理解用正確的標簽做正確的事情。1. html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎解析 ；2. 即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的；搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于SEO;3. 使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。11#常見兼容性問題Png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成 PNG8. ？瀏覽器默認的margin和Padding不同。解決方案是加一個全局的margin:0;Padding:O;

9、來統一。IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。浮動 ie 產生的雙倍距離 #boxfloat:left;Width:10px;margin:000100px;？這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)漸進識別的方式，從總體中 逐漸排除局部。？首先，巧妙的使用9”這一標記，將IE游覽器從所有情況中分離出來。接著，再次使用“將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。css.bb ？backg

10、round-color:#f1ee18;/ 所有識別 /.background-color:#00deff9;/ IE6、7、8 識別/+background-color:#a200ff;/ IE6、7 識別 /_background-color:#1e0bd1;/ IE6 識別 / ？IE下,可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性;FirefOX下,只能使用getAttribute()獲取自定義屬性.解決方法：統一通過getAttribute()獲取自定義 屬性E下,even對象有x,y屬性,但是沒有pageX,pageY屬性;Fir

11、efOX下,event對象有 pageX,pageY屬性,但是沒有x,y屬性.？解決方法：(條件注釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。？ChrOme中文界面下默認會將小于12px的文本強制按照12px顯示,可通過加入CSS屬性-Webkit-text-size-adjust:none; 解決.？超鏈接訪問過后hover樣式就不出現了被點擊訪問過的超鏈接樣式不在具有hover和active 了解決方法是改變 CSS 屬性的排列順序:L-V-H-A:a:linka:ViSiteda:hovera:active的離線儲存，描述一下 cookies ，SeSSionStorage和

12、 localStorage的區別cookie在瀏覽器和服務器間來回傳遞。SeSSiOnStorage和localStorage不會SeSSionStOrage 和 localStorage 的存儲空間更大；SeSSiOnStorage和localStorage有更多豐富易用的接口；SeSSiOnStorage和localStorage各自獨立的存儲空間；CSS 一、介紹一下CSS的盒子模型(1)有兩種，IE盒子模型、標準 W3C盒子模型；IE的content部分包含了 border和Pading;(2)盒模型：內容(content)、填充(Padding)、邊界(margin)、邊框(bord

13、er).二、CSS選擇符有哪些哪些屬性可以繼承優先級算法如何計算新增偽類有那些？選擇器(#myid)2. 類選擇器(.myclassname)3. 標簽選擇器(div,h1,p)4. 相鄰選擇器(h1+p)5. 子選擇器（ulli）6. 后代選擇器（Iia）7. 通配符選擇器（*）8. 屬性選擇器（arel=externa門）9. 偽類選擇器（a:hover,li:nth-child ）可繼承的樣式：fon t-sizefo nt-familycolor,ULLIDLDDDT;不可繼承的樣式：borderpaddi ngmargi nwidthheight優先級就近原則，同權重情況下樣式定義最

14、近者為準；載入樣式以最后載入的定位為準；優先級為：!importantidclasstag,important比內聯優先級高三、CSS3新增偽類舉例p:first-of-type 選擇屬于其父元素的首個 p元素的每個p元素。 p:IaSt-Of-type 選擇屬于其父元素的最后 p元素的每個p元素。 p:only-of-type選擇屬于其父元素唯一的p元素的每個p元素。P:only-child選擇屬于其父元素的唯一子元素的每個 p元素。 p:nth-child（2）選擇屬于其父元素的第二個子元素的每個p元素。:enabled:disabled控制表單控件的禁用狀態。:CheCked單選框或復選

15、框被選中。四、 如何居中div如何居中一個浮動元素水平居中：給div設置一個寬度，然后添加 margin:Oauto屬性divwidth:200px;margi n:0auto;垂直居中：確定容器的寬高：如寬500高300的層設置層的外邊距.divWidth:500PXheight:300px;lass1/ 權重為id1權重為100+仁101 /id1div/權重為10+1=11 /.class1div/ 權重為10+10+仁21 /.如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現十三、解釋下浮動和它的工作原理清除浮動的技巧十四、用過媒體查詢，針對移動端的布局嗎十五、使用CS

16、S預處理器嗎喜歡那個SASS十六、如果需要手動寫動畫，你認為最小時間間隔是多久，為什么多數顯示器默認頻率是60Hz ,即1秒刷新60次，所以理論上最小間隔為：1/60 * 1000ms =十七、display:inline-block什么時候會顯示間隙，如何解決移除空格、使用 margin 負值、使用 font-size:0、Ietter-SPaCing、WOrd-SPaCingJaVaSCriPt介紹js的數據類型ECMASCriPt 有 5 種原始類型（PrimitiVetyPe ） ，即P Undefined、Null、Boolean、NUmber 和 String。js有哪些內置對象數

17、據圭寸裝類對象（五種）：Object、Array、Boolean、NUmber 和 String ；其他對象：FUnction、ArgUments、Math、Date、RegEXP、Errorthis對象的理解this總是指向函數的直接調用者（所謂當前對象，而非間接調用者）如果有new關鍵字，this指向new出來的那個對象;在事件中，this指向觸發這個事件的對象，特殊的是IE中的attachEvent中的this總是指 向全局對象WindOW。eval ()是做什么的把對應的字符串解析成JS代碼并運行；應該避免使用eval不安全，非常耗性能(2次，一次解析成js語句，一次執行)。由JSoN

18、字符串轉換為JSoN對象的時候可以用eval，VarObj=eval( ( +str+ )。DoM怎樣添加、移除、移動、復制、創建和查找節點創建新節點創建一個 DOM 片段 CreateDOCUmentFragment()創建一個具體的元素CreateEIement()創建一個文本節點CreateTeXtNOdeo添加、移除、替換、插入 appe ndChild()removeChild()replaceChild()i nsertBefore()在已有的子節點前插入一個新的子節點：查找通過標簽名稱：getEleme ntsByTagName().通過元素的Name屬性的值(IE容錯能力較強，

19、會得到一個數組，其中包括id等于name值的):getEleme ntsByName().通過元素Id ,唯一性:null 和 Undefined 的區別null是一個表示”無”的對象，轉為數值時為0；Undefined是一個表示”無”的原始值，轉為數值時為NaN。Undefined :(1) 變量被聲明了，但沒有賦值時，就等于 Undefined。(2) 調用函數時，應該提供的參數沒有提供，該參數等于Un defi ned(3) 對象沒有賦值的屬性，該屬性的值為Undefined。(4) 函數沒有返回值時，默認返回 Undefined。null:(1) 作為函數的參數，表示該函數的參數不是對

20、象。(2) 作為對象原型鏈的終點。new操作符具休干了什么呢(1)創建一個空對象，并且this變量引用該對象，同時還繼承了該函數的原型。(2) 屬性和方法被加入到this引用的對象中。(3) 新創建的對象由this所引用，并且最后隱式的返回this。JSoN的了解JSON(JaVaSCriPtObjeCtNotatio n)是一種輕量級的數據交換格式。它是基于JaVaSCriPt的一個子集。數據格式簡單,易于讀寫，占用帶寬小。格式：采用鍵值對，例如： age : 12 , n ame : backcall()和apply()的區別和作用apply()函數有兩個參數：第一個參數是上下文，第二個參

21、數是參數組成的數組。如果上下文是null ,則使用全局對象代替。如：(this,1,2,3);call()的第一個參數是上下文，后續是實例傳入的參數序列。如：(this,1,2,3);如何獲取UA什么是Ua ？fun ctio nwhatBrowser()其他1.HTTP狀態碼知道哪些100Continue繼續，一般在發送post請求時，已發送了 httpheader之后服務端將返回此信息， 表示確認，之后發送具體參數信息200OK正常返回信息201Created請求成功并且服務器創建了新的資源202ACCePted服務器已接受請求，但尚未處理 301MOVedPermanently 請求的網

22、頁已永 久移動到新位置。302Found臨時性重定向。303SeeOther臨時性重定向，且總是使用 GET請求 新的URI。304NotModified自從上次請求后，請求的網頁未修改過。400BadReqUeSt服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。401Unauthorized請求未授權。 403Forbidden 禁止訪問。404NOtFOund 找不到如何與 URI 相匹配的資源。500InternalServerError 最常見的服務器端錯誤。503SerViCeUnavailable服務器端暫時無法處理請求(可能是過載或維護)。1.你有哪些性能優

23、化的方法（1）減少http請求次數：CSSSPrites,JS、CSS源碼壓縮、圖片大小控制合適；網頁 GZiP ,CDN托管，data緩存，圖片服務器。（2）前端模板JS+數據，減少由于HTML標簽導致的帶寬 浪費，前端用變量保存 AJAX請求結果，每次操作本地變量，不用請求，減少請求次數（3）用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。（4）當需要設置的樣 式很多時設置CIaSSName而不是直接操作style。（ 5）少用全局變量、緩存 DOM節點查找的結 果。減少IO讀取操作。（6）避免使用 CSSEXPreSSiOn （CSS表達式）又稱Dynamicproperties（動 態屬性）。（7）圖片預加載，將樣式表放在頂部，將腳本放在底部