行內(nèi)元素和塊元素的區(qū)別

1. 概念
   • 塊元素：默認(rèn)獨占一行，頁面中垂直排列，寬高和內(nèi)外邊距可控
   • 行內(nèi)元素：默認(rèn)同行排列，寬高由內(nèi)容決定
2. 行內(nèi)元素和塊元素舉例
   • 塊元素：<div>、<p>、<table>、<ul>
   • 行內(nèi)元素：<span>、<img>、<a>、<input>
3. 行內(nèi)元素和塊元素的相互轉(zhuǎn)換
   • display:inline;將塊元素轉(zhuǎn)換為行內(nèi)元素
   • display:block;將行內(nèi)元素轉(zhuǎn)換為塊元素
   • display；inline-blockl;行內(nèi)塊元素，既有block的寬度高度特性，也有inline的同行特性

對盒模型的理解

1. 概念
   • 盒模型：CSS定義所有元素都可以擁有像盒子一樣的外形和平面空間，包括內(nèi)容區(qū)（content），內(nèi)邊距（padding）、邊框（border）、外邊距（margin）
2. 盒模型分為：標(biāo)準(zhǔn)盒模型和IE盒模型（怪異盒模型）
   • 標(biāo)準(zhǔn)盒模型（box-sizing:content-box;)的width和height屬性的范圍只包含content內(nèi)容區(qū)
   • IE盒模型（怪異盒模型，box-sizing:border-box;)的width和height屬性的范圍包含了border、padding和content。

頁面元素常見的水平居中方式

1. 塊元素外邊距auto自動居中
   • 為塊元素添加margin:auto屬性，兼容性好，PC端常用技術(shù)
2. 內(nèi)聯(lián)元素text-align文本居中
   • 父元素設(shè)定text-algin:center屬性，子元素會居中，對大多數(shù)內(nèi)聯(lián)元素有效
3. 使用彈性盒布局：父元素添加彈性盒，控制子元素的水平位置居中
   • 父元素添加彈性盒（display:flex），且添加justify-content:center;和align-items:center;
4. transform移動+position絕對定位居中
   • 通過定位使元素左上角居中，在通過transform:transform:translate(-50%,-50%)居中

CSS優(yōu)先級和權(quán)重使怎么樣的

1. CSS選擇器優(yōu)先級
   • !important style屬性 #id .className 派生選擇器 群組選擇器 *
2. CSS選擇器權(quán)重
   • 行內(nèi)樣式（1000）>id選擇器（100）>class選擇器（10）>標(biāo)簽選擇器（1）>通用下選擇器（0）

常用的瀏覽器內(nèi)容有哪些

1. 瀏覽器內(nèi)核的作用
   • 也稱“渲染引擎”，用來解釋網(wǎng)頁語法并渲染到網(wǎng)頁上，瀏覽器內(nèi)核決定了瀏覽器該如何顯示網(wǎng)頁內(nèi)容及頁面的格式信息。
2. 常見的瀏覽器內(nèi)核
   • IE瀏覽器內(nèi)容：Trident內(nèi)核，也是俗稱的IE內(nèi)核
   • Chrome瀏覽器內(nèi)容：統(tǒng)稱Chrome內(nèi)核，以前是Webkit內(nèi)核，現(xiàn)在是Blink內(nèi)核
   • Firefox瀏覽器內(nèi)核：Gecko內(nèi)核，俗稱Firefox內(nèi)核
   • 蘋果Safari瀏覽器內(nèi)核：Webkit內(nèi)核，特點是不受IE、Firefox等內(nèi)核的約束，比較安全
   • Opera瀏覽器內(nèi)核:最初是自己的Presto內(nèi)核，后來加入谷歌大軍，從Webkit又到了Blink內(nèi)核

常見的瀏覽器兼容性問題有哪些

1. 瀏覽器兼容問題產(chǎn)生的原因
   • 因為不同瀏覽器使用內(nèi)核及所支持的HTML等網(wǎng)頁語言標(biāo)準(zhǔn)不同，以及用戶客戶端的環(huán)境不同（如分辨率不同）造成的顯示效果不能打到理想效果，一般兼容問題主要解決的是IE6、7、8的問題
2. 常見的兼容性問題
   • 在IE6、7中沒辦法設(shè)置1px的高度的元素，解決方案：添加overflow:hidden
   • 圖片下方縫隙問題，解決方案：添加vertical-align:center;
   • IE6中雙倍邊距的問題，給float元素添加display:inline;
   • 可以采用CSS hack，為不同的樣式添加不同的CSS前綴；

link和@import的區(qū)別

1. link和@import的區(qū)別
   • link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS，@import只能加載CSS
   • link引用CSS時，在頁面載入時同時加載，@import需要頁面網(wǎng)頁完全載入以后加載，可能會出現(xiàn)閃屏
   • link是XHTML標(biāo)簽，無兼容性問題，@import是在CSS2.1提出的，低版本瀏覽器不支持
   • link支持使用JavaScript控制DOM去改變樣式，而@import不支持。

對CSSOM的理解

1. 概念
   • CSSOM。即CSS Object Model（CSS對象模型），是對CSS樣式表的對象化表示，同時還提供了相關(guān)API用來操作CSS樣式
2. CSSOM包含兩部分
   • Model：描述樣式表和規(guī)則的模型部分
   • View：和元素視圖相關(guān)的API部分
3. Model部分：是CSSOM的本體，通常用HTML標(biāo)簽style或者link標(biāo)簽即可創(chuàng)建
   • 構(gòu)建CSSOM樹是依賴于DOM樹的，在構(gòu)建CSSOM樹時，對于任何一個元素的最終樣式，瀏覽器都會從該節(jié)點的最上層節(jié)點開始，通過遞歸的方式不斷向下合并更加具體的規(guī)則，最終得出完整的結(jié)果。
4. View部分：分成三個部分：窗口部分、滾動部分和布局部分
   • 窗口的api：操作瀏覽器窗口的位置、尺寸等，包括；moveTo（x，y)：窗口移動到屏幕的特定坐標(biāo)；moveBy（x，y）：窗口移動特定距離；resizeTo（x，y）：改變窗口大小到特定尺寸；resizeBy（x，y)：改變窗口大小特定尺寸。
   • 滾動的api:分為視口滾動和元素滾動，為元素添加監(jiān)聽滾動的事件，scrollX:表示X方向上的當(dāng)前滾動距離，scrollY：表示Y方向上的當(dāng)前滾動距離；scrollTop：表示Y方向上的當(dāng)前滾動距離。scrollLeft:表示X方向上的當(dāng)前滾動距離。
   • 布局：獲特定元素的位置和尺寸信息，window.innerHeight，window.innerWidth:表示視口的高度和寬度。window.outerWidth，window.outerHeight:表示瀏覽器窗口占據(jù)的大小，很多瀏覽器沒有實現(xiàn)，window.screen.width,window.screen.height:設(shè)備屏幕寬高尺寸 小結(jié)：DOM承擔(dān)了語義職能，而CSSOM承擔(dān)了表現(xiàn)職能。

對邊界塌陷的理解

1. 邊界塌陷的概念：
   • 父元素包裹子元素，給子元素設(shè)置margin-top，只想讓子元素距離父元素邊框有一段距離，而卻出現(xiàn)了父元素的頂端距離body這個邊框出現(xiàn)了位移
2. 邊界塌陷的解決辦法
   • 給父元素加邊框
   • 為父元素添加padding-top去控制子元素
   • 給父元素設(shè)置溢出隱藏（overflow:hidden）觸發(fā)bfc機制
   • 給父元素或者子元素添加浮動，讓其脫離標(biāo)準(zhǔn)流
   • 將父元素轉(zhuǎn)變?yōu)樾袃?nèi)塊元素，display:inline-block

什么是bfc

1. 概念
   • bfc，即Block Formatting Contexts（塊級格式化上下文），是指瀏覽器中創(chuàng)建了一個獨立的渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。
2. bfc的原理
   • 內(nèi)部的塊元素會在垂直方向上一個接一個的放置，且垂直方向上的距離由margin決定
   • 每個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動元素也是如此
   • bfc的區(qū)域不會與float的元素區(qū)域重疊
   • 計算BFC的高度時，浮動子元素也參與計算
   • BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面元素，反之亦然

對語義化標(biāo)簽的理解

1. 語義化標(biāo)簽的概念
   • 具有含義的標(biāo)簽，它可以清晰的展示標(biāo)簽的作用和用途
2. 語義化標(biāo)簽的優(yōu)勢
   • 語義化標(biāo)簽具有可讀性，使得文檔結(jié)構(gòu)清晰
   • 瀏覽器便于讀取，有利于SEO優(yōu)化
   • 展現(xiàn)在頁面中時，用戶體驗好
   • 便于團(tuán)隊開發(fā)和維護(hù)
3. H5的語義化標(biāo)簽有：header，nav，footer，section，aside

對漸進(jìn)增強和優(yōu)雅降級的理解

1. 漸進(jìn)增強和優(yōu)雅降級的概念
   • 漸進(jìn)增強：對低版本瀏覽器進(jìn)行構(gòu)建頁面，完成基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互、追加功能達(dá)到更好的體驗。
   • 優(yōu)雅降級：構(gòu)建站點的完整功能，然后針對瀏覽器進(jìn)行兼容。比如用CSS3構(gòu)建了一個應(yīng)用，做完后逐步針對各大瀏覽器進(jìn)行hack，使其可以在低版本瀏覽器上正常瀏覽
2. 漸進(jìn)增強和優(yōu)雅降級的區(qū)別
   • 優(yōu)雅降級是從復(fù)雜開始，逐步向下兼容，最終能適應(yīng)各種瀏覽器和平臺
   • 漸進(jìn)增強是從一個能夠起作用的初始版本開始，不斷擴(kuò)充，以適應(yīng)各種環(huán)境的要求

在項目中是如何適配的

1. 自適應(yīng)和響應(yīng)式概念
   • 自適應(yīng)：根據(jù)不同的設(shè)備屏幕大小來自動調(diào)整尺寸、大小
   • 響應(yīng)式：會隨著屏幕的實時變動而自動調(diào)整，是一種自適應(yīng)
2. 常見的適配方案（4種）
   • 百分比布局：因為不同屬性的百分比值，相對的可能是不同的參照物，所以百分比往往很難統(tǒng)一，在移動端適配中使用是很少的。
   • rem + 動態(tài)font-size，rem是相對于html元素的font-size來設(shè)置的。（em是相對所在元素的font-size）
     • 通過媒體查詢來設(shè)置不同尺寸的屏幕html的font-size尺寸
     • js監(jiān)聽頁面clientWidth的變化，重新設(shè)置font-size到HTML上。
   • flex的彈性布局
   • VW:比如375的屏幕，1vw=3.75px。 一般開發(fā)過程中，這幾種方式都是組合使用的。

對響應(yīng)式的理解

1. 響應(yīng)式布局的概念
   • 同一頁面在不同屏幕尺寸下有不同的布局，使一個網(wǎng)站、app能夠兼容多個終端，最終目的其實也是為了適配。
2. 常見的響應(yīng)式布局方式有哪些
   • 流式布局，也叫百分比布局，將頁面的寬度設(shè)置成百分比，根據(jù)窗口的寬度來進(jìn)行伸縮
   • 棧格系統(tǒng)（Grid System）將一個頁面劃分為幾個主要區(qū)域，定義這些區(qū)域的大小、位置、層次等關(guān)系
   • 媒體查詢@media，@media由媒體類型和一個或多個檢測條件表達(dá)式組成
   • viewport適配將px轉(zhuǎn)換為rem或者vw，讓頁面自適應(yīng)。

HTML5的新特性有哪些

1. 拖拽釋放（drag and drop）API
2. 語義化更好的內(nèi)容標(biāo)簽（header footer nav aside article section）
3. 音頻、視頻（audio video）API
4. 畫布（Canvas）API
5. 地理（Geolocation）API
6. localstroage和sessionstroage緩存方式
7. 新增表單控件（calendar date time email ul search）

localStroage和sessionStroage的區(qū)別

1. 相同點
   • 都是用來存儲客戶端臨時信息的對象
   • 都只能存儲字符串類型，如果遇到其他類型，需要轉(zhuǎn)換成字符串類型（JSON.stringfy()）
   • 存儲大小都是5MB（不同瀏覽器可能不同）
2. 不同點
   • localStroage是永久存儲在瀏覽器中，只要用戶不刪，就會一直存在。
   • sessionStroage是會話級別的存儲，當(dāng)用戶關(guān)閉瀏覽器，此時數(shù)據(jù)就會被銷毀。 不同瀏覽器無法共享localStroage和sessionStroage中的信息

js中數(shù)據(jù)類型有哪些

1. 在ES5中 基本類型：Number、String、Boolean、undefined、Null 引用類型：object、function、Array
2. ES6中新增了一種symbol：這種類型的數(shù)據(jù)每次創(chuàng)建，則開辟新空間存儲，可解決屬性名稱沖突問題
3. 谷歌新版本中還出現(xiàn)了一種bigInt，是指安全存儲、操作大整數(shù)
4. null和undefined的區(qū)別
   • undefined：聲明了但沒有使用
   • null：聲明的是一個空類型。

js中數(shù)組的常用方法有哪些

1. ES5中的數(shù)組常用方法 join：合并數(shù)組摒轉(zhuǎn)換為字符串，參數(shù)代表以其分隔符 reverse：反轉(zhuǎn)數(shù)組內(nèi)元素 slice：從數(shù)組內(nèi)截取數(shù)組。第一個參數(shù)為開始下標(biāo)，第二個參數(shù)為結(jié)束下標(biāo)（不包含） concat：連接兩個或以上的數(shù)組 splice：方法從數(shù)組添加/刪除項目，并返回刪除的項目
2. ES6中的數(shù)組常用方法 map：數(shù)組循環(huán)、遍歷（map會返回一個新數(shù)組，forEach()則是直接修改原數(shù)組） some：數(shù)組循環(huán)、遍歷，返回值為判斷結(jié)果，當(dāng)條件只要有一個成立，就返回true，反之false。 reduce：為數(shù)組中的每一個元素依次執(zhí)行回調(diào)函數(shù)，其中要注意第一個參數(shù)prev，第一次執(zhí)行，表示的默認(rèn)值，第二次以后的執(zhí)行，表示的是上一次回調(diào)的結(jié)果。

js中常用的事件綁定方式有哪些

1. 在dom元素中直接綁定，<標(biāo)簽 on事件名稱=”function”>
2. js代碼中用對象.on事件名稱綁定。
3. 綁定事件監(jiān)聽該函數(shù)：addEventListener（事件名稱、函數(shù)、否使用捕獲類型），這里事件名稱不加on

對作用域和作用域鏈的理解

1. 作用域的概念
   • 限制某個變量只能在某個區(qū)域內(nèi)有效，分為全局作用域和局部作用域，因此根據(jù)作用域中變量的劃分，分為全局變量和局部變量。
2. 作用域的分類
   • 全局作用域：代碼中任何地方都能訪問到的變量
   • 局部作用域：函數(shù)內(nèi)可訪問的變量
   • ES6中的塊級作用域：通過let或const聲明，所聲明的變量在指定塊中被訪問
3. 作用域鏈的概念 作用域鏈：變量取值是在創(chuàng)建這個變量的函數(shù)的作用域中取值，但是如果在當(dāng)前作用域中沒用查到值，就會向上級作用域去查，直到查到全局作用域，查找過程形成的鏈條就叫做作用域鏈。

var\let\const的區(qū)別

1. var是ES5提出的，let和const是ES6提出的
2. const聲明的是常量，必須賦值。
   • 一旦聲明必須賦值，不能用null占位
   • 聲明后不能再修改
   • 如果聲明的是復(fù)合類型數(shù)據(jù)，可以修改其屬性。
3. let和var聲明的是變量，聲明后可以修改，聲明時可以不賦值
4. var允許重復(fù)聲明變量，后面后覆蓋前面的變量，let和const在同一作用域不允許重復(fù)聲明變量，會報錯。
5. var聲明的變量存在變量提升（將變量提升到當(dāng)前作用域的頂部）。即變量可以在聲明之前調(diào)用，值為underfined。let和const不存在變量提升。
6. var不存在塊級作用域，let和const存在塊級作用域。

談?wù)剬﹂]包的認(rèn)識

1. 閉包的概念
   • 一個函數(shù)訪問了此函數(shù)的父級及父級以上的作用域中的變量，這個函數(shù)就是閉包。本質(zhì)上，js中的每個函數(shù)都是一個閉包，因為每個函數(shù)都可以訪問全局變量。一般理解為函數(shù)嵌套函數(shù)。
2. 閉包的作用
   • 訪問函數(shù)內(nèi)部的變量
   • 讓變量始終保持在內(nèi)存中
3. 閉包的優(yōu)點
   • 可以減少全局變量的定義，避免全局變量的污染
   • 能夠讀取函數(shù)內(nèi)部的變量
   • 在內(nèi)存中維護(hù)一個變量，可以用作緩存
4. 閉包的缺點
   • 造成內(nèi)存泄漏：變量駐留內(nèi)存，會影響性能，在IE中，可能造成內(nèi)存泄漏，解決辦法：使用完變量，再賦值給該變量null。
   • 造成性能損失：閉包涉及跨作用域的訪問，所以會導(dǎo)致性能損失，解決辦法：涉及到跨作用域的變量，定義為局部變量，減輕對性能的影響。

對原型和原型鏈的認(rèn)識

1. 原型的概念
   • 函數(shù)定義的時候，自帶的prototype對象就是原型，分為顯式原型和隱式原型
   • 顯式原型：函數(shù)的prototype屬性
   • 隱式原型：實例對象都會有proto屬性 注意：constructor，每個prototype原型都有一個constructor屬性，指向它關(guān)聯(lián)的構(gòu)造函數(shù)
2. 原型鏈的概念
   • 每個實例化對象都有一個proto屬性，而這個proto屬性指向構(gòu)造函數(shù)的原型對象，原型對象上也有一個proto屬性，就這樣一層一層往上找，直到找到object.prototype，就這樣查找的過程就叫原型鏈。 注意：一般應(yīng)用在繼承相關(guān)的代碼中，比如說jq中定義插件，其核心就是使用原型和原型鏈。

對面向?qū)ο蟮睦斫?/h3>

1. 面向?qū)ο蟮母拍?
   • 通過把屬性（變量）和方法（函數(shù)）封裝起來，通過實例化對象，在類外部可以訪問屬性和方法，這就是面向?qū)ο缶幊?，js中時通過function來進(jìn)行封裝的。
2. 面向?qū)ο蟮娜筇卣?
   • 封裝：把一種事物的方法和屬性封裝到對象中
   • 繼承：子對象可以繼承父對象的屬性和方法
   • 多態(tài)：同一個方法，自定義和父定義的內(nèi)容不同
3. 面向?qū)ο缶幊痰膬?yōu)勢
   • 易維護(hù)，易復(fù)用，效率高，易擴(kuò)展（耦合性比較低）
4. 面向?qū)ο缶幊痰膶崿F(xiàn)
   • 創(chuàng)建對象
     • 字面量形式:{}
     • Object構(gòu)造函數(shù)創(chuàng)建
     • 構(gòu)造函數(shù)形式: new XXXX
   • 遍歷對象
     • for…in
     • Object.entries()/Object.keys()/Object.values()
   • 對象序列化
     • 可以把對象轉(zhuǎn)換為字符串:JSON.stringfy()
     • 可以把字符串轉(zhuǎn)換為對象:JSON.parse()
5. 設(shè)計模式
   • 單例模式：一個類只能有一個實例，并提供一個訪它的全局訪問點。
   • 工廠模式：用固定的方式批量創(chuàng)建對象。
   • 觀察者模式：設(shè)立觀察者方法，觀察是否有值更新，通過Object.defineProperty，修改其他對象的屬性。
   • 訂閱模式：發(fā)布者內(nèi)容變化，通過中間層接受并通知訂閱者，訂閱者收到通知，更新對應(yīng)的屬性以及其他模式。
6. ES6中的面向?qū)ο?
   • class定義類
   • static靜態(tài)屬性
   • constructor方法，通過new命令生成對象實例時，自動調(diào)用該方法
   • super父類構(gòu)造函數(shù)
   • extends繼承關(guān)鍵字

對設(shè)計模式的理解

1. 設(shè)計模式的概念
   • 一套被反復(fù)使用的，多數(shù)人知曉的，經(jīng)過分類編目的，代碼設(shè)計經(jīng)驗的總結(jié)，是解決軟件設(shè)計常見問題的可復(fù)用方案。一共有23種設(shè)計模式
2. 前端常用的設(shè)計模式
   • 單例模式：一個類只能有一個實例，并提供一個訪它的全局訪問點。應(yīng)用：彈窗、ajax封裝等
   • 工廠模式：用固定的方式批量創(chuàng)建對象。應(yīng)用：后臺登錄鑒權(quán)，用工廠模式判斷用戶的角色和權(quán)限列表
   • 觀察者模式：設(shè)立觀察者方法，觀察是否有值更新，通過Object.defineProperty，修改其他對象的屬性。
   • 訂閱模式：發(fā)布者內(nèi)容變化，通過中間層接受并通知訂閱者，訂閱者收到通知，更新對應(yīng)的屬性以及其他模式。應(yīng)用;vue2中的v-model雙向綁定。

對繼承的看法

1. 繼承的概念
   • 父類的屬性和方法可以被子類繼承，子類可以調(diào)用父類的屬性和方法
2. 前端常用的繼承方式

對DOM操作的理解

1. DOM的概念
   • DOM（Document Object Model，文檔對象模型），是js為操作html和css，提供的api接口。 注意：HTML中的每個標(biāo)簽元素，屬性，文本都可以看做是一個DOM的節(jié)點，構(gòu)成了DOM樹。
2. DOM的常用操作
   • 獲取節(jié)點
     • getElementById，getElementsByName，getElementsByClassName，getElementsByTagName
     • querySelector(),querySelectorAll()

數(shù)組的遍歷方法有哪些

1. 數(shù)組常用的遍歷方法
   • for循環(huán)、foreach循環(huán)
   • map循環(huán)：方法返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值
   • filter遍歷：方法創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素
   • every遍歷：每個元素都滿足條件則返回true，否則返回false
   • some遍歷：只要有一個以上的元素滿足條件就返回true，否則返回false，退出循環(huán)
   • reduce：對數(shù)組中的每個元素執(zhí)行一個回調(diào)函數(shù)，將其結(jié)果返回值。

對事件代理(事件委托)的理解

1. js的事件流 冒泡：當(dāng)子元素觸發(fā)某個事件之后，該事件依次向上觸發(fā)父元素的同類事件。 捕獲：和冒泡類似，只不過事件的順序相反，即是從上級節(jié)點傳遞到下級節(jié)點
2. 事件代理的概念
   • 事件代理：也稱為事件委托，是把原本需要綁定在子元素上的事件委托給它的父元素，讓父元素來監(jiān)聽子元素的冒泡事件，并在子元素發(fā)生事件冒泡時找到這個子元素。
   • 事件代理的實現(xiàn)
     • 確定要添加事件元素的父級元素
     • 給父元素定義事件，監(jiān)聽子元素的冒泡事件
     • 使用event.target來定位觸發(fā)事件冒泡的子元素。
3. 事件代理的優(yōu)點
   • 減少事件的定義，減少內(nèi)存消耗
   • 可以為DOM操作的元素動態(tài)綁定事件。

到了這里，關(guān)于web前端常見面試題歸納的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！