關于2020年前端面試題以答案分析-創(chuàng)新互聯(lián)

創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務器提供商，新人活動買多久送多久，劃算不套路！

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網站制作、做網站、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯(lián)網時代的陽東網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

這篇文章主要介紹關于2020年前端面試題以答案分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

1、瀏覽器的內核分別是什么?

IE瀏覽器：trident內核 

火狐瀏覽器 gecko內核

蘋果瀏覽器 webkit內核

谷歌瀏覽器及歐鵬瀏覽器  bink內核

2、標簽上title與alt屬性的區(qū)別是什么?

alt是錯誤時提示，頁面時錯誤無法顯示時鼠標經過提示文本信息

Title 為該屬性提供信息

3、說下bootstrap柵格系統(tǒng)？

Bootstrap是前端一款開發(fā)移動端響應框架，會將提供視口自動分為最多12列。用行（row）與列（column）的組合來創(chuàng)建頁面布局，

還可以根據(jù)視口大小區(qū)分個屏幕下顯示樣式，主要分為：

.col-xs-盒子占分數(shù)超   /超小屏幕_手機/

.col-sm-盒子占分數(shù)   /小屏下/

.col-md-盒子占分數(shù)    />-992px中屏/

 .col-lg-盒子占分數(shù)  />=1200px大屏/

4、說下優(yōu)雅降級和漸進增強有什么不同？

優(yōu)雅降級

是指先針對高版本瀏覽器開發(fā)完整樣式功能，在對低版本瀏覽器進行優(yōu)化處理，從而解決瀏覽器各版本開發(fā)時兼容問題

漸進增強

是指根據(jù)低版本瀏覽器構建符合瀏覽器基本功能樣式，在對高版本瀏覽器進行交互頁面性能優(yōu)化

5、rgba和opacity有什么區(qū)別？

共同點：

rgba() 和 opacity()都可以對頁面元素進行樣式透明效果

不同點：

rgba()只作用于元素color于background屬性透明，但子級不會繼承屬性。

opacity()針對元素所有樣式透明效果

6、display:none與visiblity:hidden之間有什么區(qū)別：

display:none與visiblity:hidden是css樣式中隱藏元素方法，display:none隱藏元素不占有原來位置，

visiblity:hidden隱藏還占有原來位置

7、清除浮動方法：浮動一般發(fā)生在高度塌陷

(1)給父盒子定高

(2)給父盒子設置overflow:hidden,auto

(3)給元素定偽類：:after、zoom=1提升

(4)定位方法清除

(5)結尾處加空div標簽clear:both

8、什么是外邊距重疊：

相鄰的兩個盒子margin可結合為一個單獨外邊距

(1)margin都為正數(shù)時，折疊結果取兩者大值

(2)margin都為負數(shù)時，折疊結果取絕對值較大值

(3)margin一正一負時，結果為兩者和

9、你遇到過哪些兼容性問題？

(1)瀏覽器默認的margin和padding不同-- 解決方案：添加全局的margin：0;padding: 0;來統(tǒng)一

(2)png24位圖片在iE6瀏覽器上出現(xiàn)背景--解決方案：做成PNG8

(3)問題癥狀：IE6里的間距比超過設置的間距

    解決方案：在display:block;后面加入display:inline;display:table;

(4)Chrome中文界面下默認會將小于12px的文本強制按照12px顯示，可通過加入CSS屬性-webkit-text-size-adjust:none解決

10、請說出幾種隱藏元素的方法：

display:none:

visibility:hidden;

position:absolute;

opacity:0;設置為0元使素完全透明

transform：scale(0)

11、::before 和:after 中雙冒號和單冒號有什么區(qū)別？解釋一下這 2 個偽元素的作用？

單冒號（:）用于CSS3偽類，雙冒號（::）用于CSS3偽元素。

想讓插入的內容出現(xiàn)在其它內容前，使用::before，否者，使用::after；

在代碼順序上，::after生成的內容也比::before生成的內容靠后。

 12、=  ==  ===之間區(qū)別？

= 表示變量賦值，

==表示一般等同，會自動轉換數(shù)據(jù)類型

===  不做類型轉換，兩邊類型一定等同

13、CSS3新增偽類有那些？

  X:first-of-type 選擇其父元素的首個 <p> 元素的每個 <p> 元

 X:last-of-type  選擇其父元素的最后 <p> 元素的每個 <p> 元素。

 X:only-of-type  選擇其父元素唯一的 <p> 元素的每個 <p> 元素

 X:only-child    選擇其父元素的唯一子元素的每個 <p> 元素。

 X:nth-child(2)  選擇其父元素的第二個子元素的每個 <p> 元素。

 :enabled、:disabled 控制表單控件的禁用狀態(tài)。

:checked，單選框或復選框被選中。

14、javascript數(shù)據(jù)類型：

javascript數(shù)據(jù)類型主要分為基本數(shù)據(jù)類型和引用數(shù)據(jù)類型

基本數(shù)據(jù)類型：string    boolean  number  undefined  null

特點：直接存儲在棧(中的數(shù)據(jù)

引用數(shù)據(jù)類型：object(aobujk)  Array(e we)  Function(放k生)

特點：數(shù)據(jù)存放在堆內存里

15、Sessionstorage、localstorage、cookie之間區(qū)別？

共同點：都是用于瀏覽器存儲緩存數(shù)據(jù)

不同點；

(1)cookie會將數(shù)據(jù)發(fā)送到服務端造成浪費

(2)cookie存儲數(shù)據(jù)大小不能超過4K，Sessionstorage存儲可以達5M

(3)cookie過期時間以前一直有效即使關閉瀏覽器，Sessionstorage僅在關閉瀏覽器之前，localstorage數(shù)據(jù)存儲一直有效

(4)cookie和localstorage在同源窗口下都是共享，SessionStorage不在不同不同瀏覽器下共享

16、說明this指向？

(1)全局作用域、定時器、立即執(zhí)行函數(shù)this指向window

(2)comm.js中this指向當前模塊

(3)es6中this指向undefined,如：箭頭函數(shù)沒有this指向

(4)事件函數(shù)中this指向事件源，普通事件函數(shù)this指向widow

(5)對象方法調用函數(shù)this指向調用對象

更改this指向方法：

call、apply、bind

(1)都可改變this指向，都采用后續(xù)傳參方式

(2)call傳參是單個傳遞，apply是數(shù)組形式

(3)call、apply函數(shù)執(zhí)行是立即執(zhí)行，bind會返回一個函數(shù)，需要調用才會執(zhí)行

17、Vue 生命周期***

vue實例從創(chuàng)建到銷毀的過程，在聲明周期每個階段，不同方法 鉤子函數(shù)共八個

(1)beforeCreate（創(chuàng)建前） 在數(shù)據(jù)觀測和初始化事件還未開始

(2)created（創(chuàng)建后） 完成數(shù)據(jù)觀測，屬性和方法的運算，初始化事件，$el屬性還沒有顯示出來

(3)beforeMout（載入前） 在掛載開始之前被調用，相關的render函數(shù)首次被調用。實例已完成以下的配置：編譯模板，把data里面的數(shù)據(jù)和模板生成html。注意此時還沒有掛載html到頁面上

(4)mouted（載入后） 在el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調用。實例已完成以下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互

(5)beforeUpadate（更新前） 在數(shù)據(jù)更新之前調用，發(fā)生在虛擬DOM重新渲染和打補丁之前?？梢栽谠撱^子中進一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程。

(6)updated （更新后）在由于數(shù)據(jù)更改導致的虛擬DOM重新渲染和打補丁之后調用。調用時，組件DOM已經更新，所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，應該避免在此期間更改狀態(tài)，因為這可能會導致更新無限循環(huán)。該鉤子在服務器端渲染期間不被調用

(7)beforeDestroy（銷毀前） 在實例銷毀之前調用。實例仍然完全可用

(8)destroyed（銷毀后） 在實例銷毀之后調用。調用后，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務器端渲染期間不被調用。

以上是關于2020年前端面試題以答案分析的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)-成都網站建設公司行業(yè)資訊頻道！

分享文章：關于2020年前端面試題以答案分析-創(chuàng)新互聯(lián)
本文網址：http://muchs.cn/article2/csjgic.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、虛擬主機、關鍵詞優(yōu)化、云服務器、微信小程序、網站維護

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)