你以為前端就上面的三大特點(diǎn)？
是的，在這次換工作之前我真的認(rèn)為就這些。
從簡(jiǎn)單開(kāi)始梳理題目：
1.前端頁(yè)面的構(gòu)成？分別有哪些功能？
分層：
1）結(jié)構(gòu)層（html）structural layer?
由HTML或者XHTML之類(lèi)的標(biāo)記語(yǔ)言負(fù)責(zé)創(chuàng)建，即：標(biāo)簽；
2）表示層（css）presentation layer
解決結(jié)構(gòu)層如何顯示的問(wèn)題。
3）行為層（js）behavior layer
內(nèi)容如何對(duì)事件作出反應(yīng)一類(lèi)的問(wèn)題解決。
2.高度不固定的容器的上下左右的居中顯示。(重點(diǎn)是垂直居中)
1）將父級(jí)容器設(shè)置為：
display:table-cell;
vertical-align:middle;
text-align:center;
2)使用flex
display: flex;
justify-content:center;
align-items:Center;
記住上面兩個(gè)，還有其他的具體的參考下面的鏈接地址；
3.margin塌陷的問(wèn)題，以及margin重疊問(wèn)題。
相信很多人都知道解決父容器不設(shè)置margin的值，只給里面的div設(shè)置一個(gè)margin-top，會(huì)有什么樣的結(jié)果，就是父容器會(huì)margin-top == 子容器的margin-top值。
解決方案：
1）給父容器設(shè)置border：1px solid transparent;
2)padding>0
3)float
4)position:absolute;
5)display:inline-block;
6)overflow:hidden/auto;
另外一種情況：
兩個(gè)div，上面的margin-bottom：30px;下面的：margin-top:10px;中間的間距是30px;取最大的。
解決辦法：只設(shè)置一個(gè)的要么margin-top；要么margin-bottom
4.html5有哪些新特性，優(yōu)點(diǎn)是什么？（老問(wèn)題，但是問(wèn)到了就懵逼了）
1）語(yǔ)義特性：語(yǔ)義話標(biāo)簽更豐富。
2）本地存儲(chǔ)
3）設(shè)備兼容
4）連接特性
5）網(wǎng)頁(yè)多媒體特性audio video標(biāo)簽
6）三維、圖形及特效特性
7）性能與集成特性
優(yōu)點(diǎn)：
1）網(wǎng)絡(luò)標(biāo)準(zhǔn)
2）多設(shè)備、跨平臺(tái)
3）即時(shí)更新
4）提高可用性和改進(jìn)用戶的友好體驗(yàn)
5）語(yǔ)義話更強(qiáng)的新標(biāo)簽
6）代替flash和silverlight
7）seo更友好
8）移動(dòng)端優(yōu)先，應(yīng)用于應(yīng)用程序和游戲
參考地址：
5.css選擇器考察
重點(diǎn)記住下面的
6.cookie 、sessionStorage、localStorage的區(qū)別
1）cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），在服務(wù)器和瀏覽器之間來(lái)回傳遞。大小限制：4K
2）sessionStorage：不會(huì)把數(shù)據(jù)發(fā)送到服務(wù)器，僅保存到本地，大小不同瀏覽器有不同限制，大概在5M左右。數(shù)據(jù)有效期不同，只在當(dāng)前會(huì)話內(nèi)有效。不在不通的瀏覽器內(nèi)共享。
3）localStroage：在所有同源窗口中都會(huì)是共享的。大小同5M左右?？梢猿志帽４?。
7.flex的屬性
flex-direction：排列方式
flex-wrap：是否換行
justify-content：對(duì)齊方式（flex-start，flex-end，center，space-between，space-around）
align-items對(duì)齊方式（flex-start，flex-end，center，baseline，stretch）
align-content：(flex-start,flex-end,center,stretch,space-between,space-around)
flex-grow:設(shè)置空間比例，等比放大或縮小
flex-shrink：默認(rèn)值為1，如果設(shè)置為：0，則在空間不足的情況下值為1的等比縮小。
flex-basis：將項(xiàng)目設(shè)置固定空間。
8.清除浮動(dòng)的方法
1）給父容器設(shè)置高度
2）浮動(dòng)元素結(jié)尾增加一個(gè)空的div：clear：both；
3）通過(guò)偽元素設(shè)置：after{content:"",display:block;clear:both;}
4）父容器overflow：hidden；
5）父容器：overflow：auto；
9.link和@import的區(qū)別
1）link是xhtml標(biāo)簽，除了可以加載css還可以定義RSS等其他事件，@import屬于css范疇，只能加載css
2）link引用css時(shí)，在頁(yè)面載入的同時(shí)加載；@import在頁(yè)面完全加載完成之后加載。
3）link無(wú)兼容性問(wèn)題，@import低版本瀏覽器不支持（目前可以忽略）
4）link支持使用javascript控制DOM去改變樣式；@import不支持；
下面是一些js相關(guān)的
10.閉包（老生常談）
官網(wǎng)：是一個(gè)擁有許多變量和一個(gè)綁定了這些變量的環(huán)境表達(dá)式，因而這些變量也是表達(dá)式的一部分。
自己的理解：閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。
11.下面的方法輸出
正確答案：
undefined 0 0 0?
undefined 0 1 2?
undefined 0 1 1
考察內(nèi)容（js的參數(shù)傳遞）
12.下面的方法的輸出
正確答案：2 4 1 1 2 3 3
考察變量的提升（不確定，這題目變態(tài)）
13.寫(xiě)一個(gè)數(shù)組去重的方法
第一種：
方法二：
方法三：也算事比較高級(jí)的一種，思路比較清晰
14.promise方法的理解和使用
參考：參考文檔，自己理解
15.簡(jiǎn)述一下javascript原型鏈繼承原理（懵逼了的給我打賞丷丷）
ps：這是一段廢話，我看到這個(gè)題目的時(shí)候真不知道怎么講，javascript原型鏈的繼承實(shí)現(xiàn)方式：object.prototype.functionName;原理是啥？
查詢之后的結(jié)果：通過(guò)新的實(shí)例繼承父構(gòu)造函數(shù)與其原型的屬性，然后通過(guò)替換子構(gòu)造函數(shù)原型達(dá)到繼承的目的
參考文獻(xiàn)：原型鏈詳解
16.href和src的區(qū)別！
href是引入超文本，src是具體的來(lái)源地址。一個(gè)是引入，一個(gè)是引用，引入不影響頁(yè)面結(jié)構(gòu)，引用影響。
ps：（沒(méi)有總結(jié)完，會(huì)不定期的添加，直到我的工作定下來(lái)?。?/p>
