前端面試題

1:前端頁面的構成，分別有哪些功能

（1）結構層（html） structural layer

由HTML或者XHTML之類的標記語言負責建立，即：標籤

（2）表示層（css）preesentation layer

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

（3）行爲層（js）behavior layer

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

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

1）將父容器設置爲：

display：table-cell;

vertical-algin:middle;

text-algin:center;

2）使用flex：

 disolay:flex;

justify-content:center;

algin-items:center;

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

父容器不設置margin值，只給裏面的div設置一個margin-top，會有什麼樣的結果，就是父容器會margin-top===子容器的margin-top值。

解決方案：

1）給父容器設置border:1px solid transpartent;

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；

四、HTML5有哪些新特性，優勢是什麼？

1）語義特性：語義化標籤更豐富

2）本地儲存

3）設備兼容

4）鏈接特性

5）網頁多媒體特性video audio標籤

6）三維圖形及特效特性

7）性能與集成特性

優勢：

網絡標準，多設備、跨平臺、即時更新，提升可用性和改進用戶的友好體驗、語義化更強的新標籤

代替flash和silverlight、seo、更友好、移動端優先，應用於應用程序和遊戲

五、css選擇器考察

.into           選擇class=「into」的全部元素。

#into          選擇id=「into」的全部元素。 

*                 選擇全部元素。

p                 選擇全部<p>元素。

div,p            選擇全部<div>元素和全部<p>元素。

div p           選擇全部<div>內部全部<p>元素

div>p          選擇父元素爲<div>元素的全部<p>元素。

div+p          選擇鏈接在<div>元素以後全部的<p>元素。

六、cookie.sessionStorage、localStorage的區別

1）cookie數據始終在同源http請求中攜帶（即便不須要），在服務器和瀏覽器之間來回傳遞。大小限制4K。

2）sessionStorage：不會把數據發到服務器，僅保存到本地，大小不一樣瀏覽器有不一樣限制，大概在5M左右。數據不一樣，只在當前會話內有效。不在不一樣的瀏覽器內共享。

3）locaolStorage:在全部同源窗口中都會共享的。大概5M左右，能夠持久保存。

七、flex的屬性

flex-direction:排列方式

flex-warp：是否換行

justify-content對齊方式（flex-start,flex-end,center,space-around,space-between）

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:將項目設置固定空間。

八、清除浮動的方法

1）給父容器設置高度

2）浮動元素結尾增長一個空的div：clear：both；

3）經過僞元素設置：after{content：「」，display：block；clear：both；}

4）父容器overflow：hidden；

5）overflow：auto；

九、link和@import的區別

1）link是XHTML標籤，除了能夠加載css還能夠定義RSS等其餘事件，@import屬於css範疇，只能加載css

2）link引用css時，在頁面載入的同時加載：@import在頁面徹底加載完成以後加載。

3)link無兼容性問題，@import低版本瀏覽器不支持（目前能夠忽略）

4）link支持使用JavaScript控制DOM去改變樣式；@import不支持；

十、閉包（老生常談）

閉包就是可以讀取其餘函數內部變量的函數。

輸出方法：

function Foo(){
getName = function(){alert(1)}
return this;
}
Foo.getName = function(){alert(2)}
Foo.prototype.getName = function(){alert(3)}
var getName = function(){alert(4)}
function getName(){alert(5)}
Foo.getName();
getName();
window.getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

十一、promise方法的理解和使用

https://www.jianshu.com/p/063f7e490e9a

十二、簡述一下JavaScript原型鏈繼承原理

經過新的實例繼承父構造函數與其原型的屬性，而後經過替換子構造函數原型達到繼承的目的

http://www.cnblogs.com/manfredHu/p/4421921.html

1三、href和src的區別！

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