前端筆試基礎面試題第二套

1.如何居中div?

Div{
Background:red;
Position:absulute;
Top:50%;
Left:50%;
Transform:translate(-50%,-50%);
}

2.居中一個浮動元素

.box{
position: relative;
left:50%;
float:left;
}
.item{
position: relative; 
left:-50%;
float:left;
background: red;
}

3.什麼是盒子模型

Html每一個元素都會被渲染成一個盒子，盒子具有content，padding，border，margin 四個屬性

IE盒子模型將border、padding歸屬於content

4.Css選擇器有哪些？哪些屬性能夠繼承？

id選擇器、類選擇器、標籤選擇器、通配選擇器、僞對象選擇器

能夠繼承的有 font-size font-family color

5.瀏覽器的內核分別是什麼？

IE內核: Trident Firefox內核：Gecko Safari內核：Webkit Opera內核：Presto——>Blink

Chrome內核：Blink/Chromium

6.html5有哪些新特性，移除了哪些元素？

繪畫 canvas ，用於媒介回放的 video 和 audio 元素，本地離線存儲 localStorage

長期存儲數據內容元素，article、footer、header、nav、section。

表單控件，calendar、date、time、email、url、search。

控件元素，webworker, websockt, Geolocation。

移出的元素有下列這些：

顯現層元素：basefont，big，center，font, s，strike，tt，u。

性能較差元素：frame，frameset，noframes。

7.行內元素有哪些？塊級元素有哪些？空元素有哪些？

（1）行內元素有：a( 錨點) ,b(粗體(不推薦)) ,span(經常使用內聯容器，定義文本內區塊) img(圖片) input(輸入框) select(項目選擇)

strong(粗體強調) label(表格標籤) cite (引用)code(計算機代碼)

（2）塊級元素有：div ul(無序列表) ol(有序列表) dl(定義列表) table(表格)form(表單) h1 (一級標題))p(段落)pre(預格式化)

（3）常見的空元素： br\ hr\img\ input\ link\meta

8.html5的canvas有什麼用

Canvas 元素用於在網頁上繪製圖形，該元素標籤強大之處在於 能夠直接在 HTML 上進行圖形操做，

9.html5如何實現離線儲存？有什麼特色？

本地離線存儲 localStorage 長期存儲數據內容元素

在html標籤裏經過manifest屬性引用一個cache.manifest文件，該文件裏聲明瞭瀏覽器需緩存的全部資源文件

配置服務器支持 cache.manifest 的Content-type: manifest

編寫 cache.manifest 文件

html頁面引用cache.manifest文件

離線瀏覽--用戶可在離線時使用它們。

速度--已經緩存的資源加載得更快。

減小服務器負載--瀏覽器將只從服務器下載更改過的資源。

10.添加、移動、移除、複製、建立和查找節點？

（1）建立新節點

createDocumentFragment()    //建立一個DOM片
  
  createElement()   //建立一個具體的元素
  
  createTextNode()   //建立一個文本節點
複製代碼

（2）添加、移除、替換、插入

appendChild()
  removeChild()
  replaceChild()
  insertBefore()
複製代碼

（3）查找

getElementsByTagName()    //經過標籤名稱
  getElementsByName()    //經過元素的Name屬性的值
  getElementById()    //經過元素Id，惟一性
複製代碼

11.Document和innerHtml的區別？

document.write是直接寫入到頁面的內容流，若是在寫以前沒有調用document.open,

瀏覽器會自動調用open。每次寫完關閉以後從新調用該函數，會致使頁面被重寫。

innerHTML則是DOM頁面元素的一個屬性，表明該元素的html內容。你能夠精確到某一個具體的元素來進行更改。

若是想修改document的內容，則須要修改document.documentElement.innerElement。

innerHTML將內容寫入某個DOM節點，不會致使頁面所有重繪

innerHTML不少狀況下都優於document.write，其緣由在於其容許更精確的控制要刷新頁面的那一個部分。

12.請求跨域資源的方法有哪些?

JSONP\ proxy [ˈprɑːksi]代理\ Cors \ xdr \中轉服務器+ajax 一、 經過jsonp跨域

二、 document.domain + iframe跨域

三、 location.hash + iframe

四、 window.name + iframe跨域

五、 postMessage跨域

六、 跨域資源共享（CORS）

七、 nginx代理跨域

八、 nodejs中間件代理跨域

九、 WebSocket協議跨域
複製代碼

13.$(document).ready和window.onload的區別？

$(document).ready:是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

意思就是DOM樹加載完畢，就執行，沒必要等到頁面中圖片或其餘外部文件都加載完畢。而且能夠寫多個.ready。

window.onload:是頁面全部元素都加載完畢，包括圖片等全部元素。只能執行一次。

14.jQuery中的選擇器有哪些？

Id、類、*、元素、集合

15.簡單實現$.ajax

$.ajax({
type:"get",
url:"http:/localhost:4002",
dataType:"json",
success:function(data){
show(data);
},
error: function(err){
console.log(err);
} 
})

16.jQuery添加元素的方法

1.append();    在所選元素的結尾添加

2.prepend();    在所選元素的開頭添加

3.html();    在所選元素內添加，若是元素內以前有別的內容會覆蓋掉

4.after();    在所選元素以後添加

5.before();   在所選元素以前添加

6.text();   在所選元素內添加文本內容

17.Active-class是哪一個組件的屬性？鑲嵌路由怎麼定義？

答：（active-class是vue-router模塊的router-link組件中的屬性，用來作選中樣式的切換；）

嵌套路由是幻燈片的組件，router/index.js，咱們把my，加了children，定義不少個子路由，子路由還能夠繼續嵌套路由。

定義方法：

細節，children註冊，path不用斜槓，訪問to：/my/login（組件裏面寫入children，path路徑不用斜槓）

18.Vuex是什麼怎麼使用？使用場景？

vuex是vue框架中狀態管理。在main.js引入store，注入。

新建了一個目錄store，...export。應用場景有：單頁應用中，組件之間的狀態。

應用實例：音樂播放、登陸狀態、加入購物車等等

19.vue-cli中src目錄下每一個文件夾和文件的用法？

assets文件夾是放靜態資源；

components是放組件；router是定義路由相關的配置；

view視圖；

app.vue是一個應用主組件；

main.js是入口文件；

20.還用過哪些前端框架簡介

React.js只是一個用於視圖層的類庫(lib)React.js並非模板引擎

angular.js自帶模板引擎，路由引擎，有健全的數據雙向綁定機制，

內置Ajax請求功能，還可以定義Model。而React.js類庫只能用於定義視圖組件。

Vue.js相對於較輕量級、沒有過多的插件、用什麼裝什麼。