總結一下這些天的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 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。