總結一下這些天的web前端開發面試題


1.前端頁面的構成?分別有哪些功能?

分層:

1)結構層(html)structural layer 

由HTML或者XHTML之類的標記語言負責創建,即:標簽;

2)表示層(css)presentation layer

解決結構層如何顯示的問題。

3)行為層(js)behavior layer

內容如何對事件作出反應一類的問題解決。

2.高度不固定的容器的上下左右的居中顯示。(重點是垂直居中)

1)將父級容器設置為:

display:table-cell;

vertical-align:middle;

text-align:center;

2)使用flex

display: flex;

justify-content:center;

align-items:Center;

記住上面兩個,還有其他的具體的參考下面的鏈接地址;

垂直居中的解決

3.margin塌陷的問題,以及margin重疊問題。

相信很多人都知道解決父容器不設置margin的值,只給里面的div設置一個margin-top,會有什么樣的結果,就是父容器會margin-top == 子容器的margin-top值。

解決方案:

1)給父容器設置border:1px solid transparent;

2)padding>0

3)float

4)position:absolute;

5)display:inline-block;

6)overflow:hidden/auto;

另外一種情況:

兩個div,上面的margin-bottom:30px;下面的:margin-top:10px;中間的間距是30px;取最大的。

解決辦法:只設置一個的要么margin-top;要么margin-bottom

4.html5有哪些新特性,優點是什么?(老問題,但是問到了就懵逼了)

1)語義特性:語義話標簽更豐富。

2)本地存儲

3)設備兼容

4)連接特性

5)網頁多媒體特性audio video標簽

6)三維、圖形及特效特性

7)性能與集成特性

優點:

1)網絡標准

2)多設備、跨平台

3)即時更新

4)提高可用性和改進用戶的友好體驗

5)語義話更強的新標簽

6)代替flash和silverlight

7)seo更友好

8)移動端優先,應用於應用程序和游戲

參考地址:

h5的優點及特性

5.css選擇器考察

重點記住下面的

 
css選擇器

6.cookie 、sessionStorage、localStorage的區別

1)cookie數據始終在同源的http請求中攜帶(即使不需要),在服務器和瀏覽器之間來回傳遞。大小限制:4K

2)sessionStorage:不會把數據發送到服務器,僅保存到本地,大小不同瀏覽器有不同限制,大概在5M左右。數據有效期不同,只在當前會話內有效。不在不通的瀏覽器內共享。

3)localStroage:在所有同源窗口中都會是共享的。大小同5M左右。可以持久保存。

7.flex的屬性

flex-direction:排列方式

flex-wrap:是否換行

justify-content:對齊方式(flex-start,flex-end,center,space-between,space-around)

align-items對齊方式(flex-start,flex-end,center,baseline,stretch)

align-content:(flex-start,flex-end,center,stretch,space-between,space-around)

flex-grow:設置空間比例,等比放大或縮小

flex-shrink:默認值為1,如果設置為:0,則在空間不足的情況下值為1的等比縮小。

flex-basis:將項目設置固定空間。

8.清除浮動的方法

1)給父容器設置高度

2)浮動元素結尾增加一個空的div:clear:both;

3)通過偽元素設置:after{content:"",display:block;clear:both;}

4)父容器overflow:hidden;

5)父容器:overflow:auto;

9.link和@import的區別

1)link是xhtml標簽,除了可以加載css還可以定義RSS等其他事件,@import屬於css范疇,只能加載css

2)link引用css時,在頁面載入的同時加載;@import在頁面完全加載完成之后加載。

3)link無兼容性問題,@import低版本瀏覽器不支持(目前可以忽略)

4)link支持使用javascript控制DOM去改變樣式;@import不支持;


下面是一些js相關的



10.閉包(老生常談)

官網:是一個擁有許多變量和一個綁定了這些變量的環境表達式,因而這些變量也是表達式的一部分。

自己的理解:閉包就是能夠讀取其他函數內部變量的函數。

參考:阮一峰博客

11.下面的方法輸出

 

 
寫出輸出值

正確答案:

undefined 0 0 0 

undefined 0 1 2 

undefined 0 1 1

考察內容(js的參數傳遞)

12.下面的方法的輸出

 

 
輸出值

正確答案:2 4 1 1 2 3 3

考察變量的提升(不確定,這題目變態)

13.寫一個數組去重的方法

第一種:

 

 
方法一

方法二:

 

 
現排序后比較

方法三:也算事比較高級的一種,思路比較清晰

 

 
使用對象賦值檢測重復

14.promise方法的理解和使用

參考:參考文檔,自己理解

15.簡述一下javascript原型鏈繼承原理(懵逼了的給我打賞丷丷)

ps:這是一段廢話,我看到這個題目的時候真不知道怎么講,javascript原型鏈的繼承實現方式:object.prototype.functionName;原理是啥?

查詢之后的結果:通過新的實例繼承父構造函數與其原型的屬性,然后通過替換子構造函數原型達到繼承的目的

參考文獻:原型鏈詳解

16.href和src的區別!

href是引入超文本,src是具體的來源地址。一個是引入,一個是引用,引入不影響頁面結構,引用影響。



作者:sallon
鏈接:https://www.jianshu.com/p/f28299a7cfe7
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM