1.哪些是塊級元素，哪些是行內元素，有什麽區別？

答：CSS規範規定，每個元素都有display屬性，確定該元素的類型，每個元素都有display的值，display 為block則代表塊級元素，display為inline則為行內元素。

   行內元素有:a，b， strong，img，input，select，span

   塊級元素有：h1~h6，p，div，ul，li，ol ,dd，dt，dd

補充一下： 常見的空元素 <br><img><hr><input><link><meta>鮮為人知的還有<area><col> <base><source>

行內元素與塊級元素的區別：

在標準文檔流裏面，塊級元素具有以下特點：
①總是在新行上開始，占據一整行；
②高度，行高以及外邊距和內邊距都可控制；
③寬度始終是與瀏覽器寬度一樣，與內容無關；
④它可以容納內聯元素和其他塊元素。

行內元素的特點：
①和其他元素都在一行上；
②高，行高及外邊距和內邊距部分可改變；
③寬度只與內容有關；
④行內元素只能容納文本或者其他行內元素。
不可以設置寬高，其寬度隨著內容增加，高度隨字體大小而改變，內聯元素可以設置外邊界，但是外邊界不對上下起作用，只能對左右起作用，也可以設置內邊界，但是內邊界在ie6中不對上下起作用，只能對左右起作用

2.CSS中的選擇器有哪些？優先級先後順序？

(1) ID選擇器(#myId)

(2)類選擇器(.myclassname)

(3)標簽選擇器(div，p，h1)

(4)相鄰選擇器(div+p)

(5)子選擇器(ul>li)

(6)後代選擇器(li a)

(7)通配符選擇器(*)

(8)屬性選擇器(a[rel="haha"])

(9)偽類選擇器(a:hover)

同權重下優先級就近原則，載入樣式以最後載入為主。 id>class>tag

3.CSS中Position：static,relative,absolute,fixed,sticky中的用法。

static:默認值，默認定位，對於left，right等屬性是不可用的.元素在正常的流中進行顯示，left,right,top,bottom屬性或者z-index聲明不可用。

relative：生成相對定位的元素，相對於元素正常位置進行定位，可以使用left,right,top,bottom屬性;當進行left等屬性的設置時，元素盡管表面上看到它偏離了原來的位置，但它實際上在文檔流中還是沒變。

absolute:生成絕對定位的元素，可以使用left,right,top,bottom屬性;相對於static以外的第一個父元素進行定位，脫離文檔流

fixed:生成固定定位的元素，相對窗口定位，可以使用left,right,top,bottom屬性;相對於瀏覽器窗口是固定的.不隨著文檔進行移動。

sticky:基於用戶的滾動位置來定位。粘性定位的元素是依賴於用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。

在目標區域以內，它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。

4.寫出多種清除浮動的方法。並寫出其原理。

1、使用時清除元素本身，不影響其他元素。當頁面有兩個div被設置成向左浮動時，想要讓第二個元素下移，這是就要讓第二個元素設置clear:left,讓第二個元素左邊不存在浮動元素

2、clear:both清除左右兩邊的元素。

它利用清除浮動來把外層的div撐開，我們在將內部div都設置成浮動之後，就會發現，外層div的背景沒有顯示，

原因就是外層的div沒有撐開，太小，所以能看到的背景僅限於一條線。

3、clearfix：清除浮動

如果有一個DIV作為外部容器，內部的DIV如果設置了float樣式，則外部的容器DIV因為內部沒有clear，導致不能被撐開

①在外部div容器的內部中設置一個div的style屬性為：clear:both；可以將外部div撐開，在子集清除浮動。但是這樣做多了一個無關緊要的div。

②最好的解決方式就是在外層加入一個類clearfix,讓其在div容器最後添加內容，內容不顯示，但仍然占據空間，清除兩邊的浮動，不必在html文件中寫入大量無意義的空標簽。

.clearfix { *zoom:1;} 這是針對於IE6的，因為IE6不支持:after偽類，這個神奇的zoom:1讓IE6的元素可以清除浮動來包裹內部元素。

③overflow:hidden屬性相當於是讓父級緊貼內容，這樣即可緊貼其對象內內容，從而實現了清除浮動

5.CSS中哪些屬性是可以繼承的？一個ul的color設置為一個值，li設置為一個值，那麽li下面的span的值怎麽設置

可以繼承的樣式：font-size,font-family,color,ul ,li, dl, dt ,dd

不可以繼承的樣式：border ,padding, margin, width, height

li下面的span中的color是繼承了li的color顏色

6.HTML5標簽 可以定義全局屬性的除了class和id之外還有哪些？

①contentEditable屬性：允許用戶可以編譯元素中的內容，所以該元素必須是可以獲取焦點的元素（可以在點擊鼠標後，可以提供出一個插入符號，提示該元素中的內容是允許編輯）。屬性為true是可以編輯的。

②hidden屬性：所有HTML5元素都是可以使用hidden元素，屬性為true則表示該元素是不顯示出來的

7.offsetWidth，clientWidth，scrollWidth的意義

offsetWidth當前對象的寬度（Width+border+padding）包括滾動條等邊線，會隨著對象的顯示而變化。style.width 也是表示對象的寬度。但是他們兩個是有區別的，①如果頁面中的元素設置為百分比，無論頁面變大或者變小，style.width返回值的寬度是百分比，而offsetWidth 返回值是數據；②style.width:如果元素沒有設置width，則style.width返回值是空。③style.width返回值除了數據之外還會返回單位px。

clientWidth 對象內容的可視區的寬度，不包括滾動條和邊線，會隨著對象顯示的大小而變化。

scrollWidth 對象實際內容的寬度，會隨著對象內容增多或減少來改變。

8.如何用CSS讓一個HTML中的元素垂直居中？

<div class="par">
    <div class="son">Center</div>
</div>

.par{ position: relative; background-color: aquamarine;width:800px;height:400px;}

.par .son{ position: absolute;left:0;top:0;right:0;bottom: 0; height:30%;width:30%;background-color: beige; margin: auto;}

讓一個元素居左邊部分200px,右邊大小自適應的代碼怎麽描寫？

<div id="main">
    <div id="left">Main Content</div>
    <div id="right">Main Content</div>
</div>

#left{  background-color: aqua; height:50px;float: left;width:200px;}
#right{ margin-left: 220px; background-color: aqua; height:50px;}

9.盒子模型並指明對應屬性名稱。怪異模式下的區別和解決方案？

盒模型：margin + padding + border + content

標準模型content不包括其他部分；IE盒子模型content 包含了padding和border

IE的怪異模式中，元素的width包含了padding和border，而標準模式中padding和border 並不屬於寬度的一部分。

CSS3中有一個元素box-sizing默認屬性是content-box；而將box-sizing:border-box，瀏覽器將會為那個元素應用IE的盒模型。

10.CSS的偽類有哪些？

:active向被激活的元素添加樣式。:focus向擁有鍵盤輸入焦點的元素添加樣式。:hover當鼠標懸浮在元素上方時，向元素添加樣式。:link向未被訪問的鏈接添加樣式。:visited向已被訪問的鏈接添加樣式。:first-child向元素的第一個子元素添加樣式。:lang向帶有指定 lang 屬性的元素添加樣式。

在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效的。提示：在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有效的。

11.寫出IE6、IE7、IE8對應的CSS hack 方式。（類屬性前後綴和條件註釋）

12.用css畫出一個三角形

.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}

13.用css繪制一個動畫

14.你對網站的兼容性了解多少？使用過什麽解決兼容性問題？

①IE中的盒模型，是=border+padding+margin+content而標準的盒子模型margin*2+padding*2+border*2+content；

②在IE瀏覽器中設置float時，margin會加倍。解決display:inline，忽略浮動;

③垂直居中：vertical-align:middle；可以設置行高line-height:為容器的高度。

④IE6下邊圖片會有間隙：則將display:block;

15.你對優化性能了解多少？

(1)優化圖片，圖片格式的選擇，比如GIF提供的顏色較少，可用於一些要求不是很高的圖片上

(2)優化CSS。比如壓縮合並CSS，如margin-left，margin-right……

(3)標註高度和寬度。如果瀏覽器沒有找到這兩個參數，它需要在下載圖片的時候計算出大小，如果圖片很多，瀏覽器會不停的調整頁面，不但影響速度，還會影響瀏覽體驗。當瀏覽器知道寬度和高度是，即使圖片無法顯示，也會騰出位置，加載後面的內容，從而加載時間快了，瀏覽體驗更好。

16.你對DOCTYPE有哪些了解？你知道多少種文檔類型？

告知瀏覽器使用哪種版本的HTML和XHTML規範。標簽可聲明三種dtd類型，嚴格版本，過渡版本，以及基於框架的HTML文檔。

HTML4.0.1規定了三種文檔類型：Strict，Transitional及Frameset。

XHTML1.0 規定了三種XML文檔類型：Strict，Transitional及Frameset。

Standards標準模式用於呈現遵循最新標準的網頁，而Quirks包容模式用於呈現傳統瀏覽器而設計的網頁。

HTML5的只需要寫，不基於SGML,因此不需要對DTD進行引用，但需要doctype來規範瀏覽器的行為。

17.提高頁面加載速度的方法有哪些,減少頁面加載時間，具體是什麽？

(1)優化圖片，圖片格式的選擇，比如GIF提供的顏色較少，可用於一些要求不是很高的圖片上

(2)優化CSS。比如壓縮合並CSS，如margin-left，margin-right……

(3)標註高度和寬度。如果瀏覽器沒有找到這兩個參數，它需要在下載圖片的時候計算出大小，如果圖片很多，瀏覽器會不停的調整頁面，不但影響速度，還會影響瀏覽體驗。當瀏覽器知道寬度和高度是，即使圖片無法顯示，也會騰出位置，加載後面的內容，從而加載時間快了，瀏覽體驗更好。

18.location知多少

1.location.href：全部長度，完整的URL

2.location.host：中間，url主機名稱和端口號 127.0.0.1:8080

3.location.hostname：不包含端口號 127.0.0.1

4.location.search：從當前的URL？開始的字符串

5.location.protocol：協議

6.navigator.userAgent：返回瀏覽器的類型useragent

19.描述一下漸進增強和優雅降級？

優雅降級：Web站點在所有新式瀏覽器都能正常工作，如果用戶使用的是老式的瀏覽器，則代碼會檢查以確認他們是否能夠正常工作，由於IE獨特的盒模型布局問題，針對不同版本的IE的Hack實踐過優雅降級了，為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗不至於完全失效

漸進增強：從被所有瀏覽器支持的基本功能開始，逐步的增加那些只有新式瀏覽器的才支持的功能，向頁面增加無害於基礎瀏覽器的額外樣式和功能。當瀏覽器支持時，他們自動的呈現並發揮效果。

20.JSONP的工作原理是什麽？與AJAX 有什麽區別？盡可能多的寫出Jquery中$.ajax()可傳入對象的屬性、方法並標註其作用。

JSONP 由兩部分組成：回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數。回調函數的名字一般是在請求中指定的。而數據就是傳入回調函數中的 JSON 數據。JSONP (JSON with Padding)是一個簡單高效的跨域方式，HTML中的script標簽可以加載並執行其他域的javascript，於是我們可以通過script標記來動態加載其他域的資源。例如我要從域A的頁面pageA加載域B的數據，那麽在域B的頁面pageB中我以JavaScript的形式聲明pageA需要的數據，然後在 pageA中用script標簽把pageB加載進來，那麽pageB中的腳本就會得以執行。JSONP在此基礎上加入了回調函數，pageB加載完之後會執行pageA中定義的函數，所需要的數據會以參數的形式傳遞給該函數。JSONP易於實現，但是也會存在一些安全隱患，如果第三方的腳本隨意地執行，那麽它就可以篡改頁面內容，截獲敏感數據。但是在受信任的雙方傳遞數據，JSONP是非常合適的選擇。

　　　　首先我們要知道的是JSONP是跨域請求的，具體的請看面試題的分析，https://my.oschina.net/courage123/blog/724251

　　　　核心是動態添加<script>標簽來調用服務器提供的js腳本不提錯誤的處理，Ajax的核心是通過xmlHttpRequest開獲取非本頁面的內容

　　　　知道了這些這道題就並不難，只需要將給出的傳遞參數傳過去就可以了

　　　　$.ajax{(

　　　　url: ‘http:~~~~‘,

　　　　type:‘ ‘,

　　　　 dataType:‘jsonp‘,

　　　　 jsonpCallback:‘jsonCallback‘,

　　　　success:function (data){

　　　　console.log(data);

　　　　　}

　　　)}

跨域５、window.name

關鍵點：window.name在頁面的生命周期裏共享一個window.name;

兼容性：所有瀏覽器都支持；

優點：

最簡單的利用了瀏覽器的特性來做到不同域之間的數據傳遞；

不需要前端和後端的特殊配制；

缺點：

大小限制：window.name最大size是2M左右，不同瀏覽器中會有不同約定；

安全性：當前頁面所有window都可以修改，很不安全；

數據類型：傳遞數據只能限於字符串，如果是對象或者其他會自動被轉化為字符

AJAX是不跨域的，而JSONP是一個是跨域的，還有就是二者接收參數形式不一樣！

 $.ajax({  
        type: "POST",  
        url: "/newcircle/view/flash/", //與後端定制的接口
        data: {"orderId":orderId,"commant":commant},   //根據需要傳遞數據
        dataType:"json",  
        async:false,  
        cache:false,  
        success: function(data){  
        //包數據解析為json 格式                                                            

        },  
        error: function(json){  
            alert("出錯了.");  
        }  
    });  

21.sessionStorage,localStorage和cookie的區別和使用方法？

cookie在服務器和瀏覽器之間來回傳遞，在客戶端的磁盤上以很小的文件保存一定量的數據。

失效時間：表示cookie何時應該被刪除的時間戳。表示在這個時間範圍內，每次訪問該網站都會向該網站的服務器發送這個已經保存在本地的cookie值，但是如果這個日期是以前的日期，那麽該cookie值就會被刪除。

而sessionStorage和localStorage不會。他們都是瀏覽器端存儲數據的

sessionStorage和localStorage存儲空間較大，有各自獨立的存儲空間，有更多豐富易用的接口。可以方便在web請求中保存數據，不需要來回請求，是HTML5的Web Storage API提供的。 sessionStorage是對於瀏覽器窗口不關閉，刷新頁面或進入同源另一頁面時數據也不會消失，關閉窗口後，數據才會消失。 localStorage如果不進行銷毀，會一直存在在瀏覽器中。 localstorage的setItem放入數據，getItem方法取出數據

22.你能說一說http中的狀態碼？各個代表什麽含義嗎？

200 OK 表示請求成功 一切正常

301 Moved Permanently 重定向，客戶請求的文檔在其他地方，新的URL在Location頭中給出，瀏覽器應該自動地訪問新的URL

302 Found 臨時重定向，類似於301，但新的URL應該被視為臨時性的替代，而不是永久性的。

304 Not Modified 客戶端有緩沖的文檔並發出了一個條件性的請求。服務器告訴客戶，原來緩沖的文檔還可以繼續使用。

400 Bad Request 請求出現語法錯誤。

403 Forbidden 資源不可用。

404 Not Found 無法找到指定位置的資源。

405 Method Not Allowed 請求方法（GET、POST、HEAD、Delete、PUT、TRACE等）對指定的資源不適用。

500 Internal Server Error 服務器遇到了意料不到的情況，不能完成客戶的請求。

501 Not Implemented 服務器不支持實現請求所需要的功能。

23.如果有一個數組中存在一些重復的元素怎麽使用JS來操作除掉重復的數字？

①借助hashtable來高效的解決這個問題

function outRepeat(a){
    var hash=[],arr=[];
    for (var i = 0; i < a.length; i++) {
        hash[a[i]]=null;
    }
    console.log(hash);
    for(var key in hash){
        arr.push(key);
    }
    console.log(arr);
}
outRepeat([2,4,4,5,"a","a"]);//["2", "4", "5", "a"]

②借助另一個數組模式，從第一個數組中取出一個元素，放入數組二中，依次從數組一中取出數組進行比較,不重復放入數組。

③

let arr = [1,2,3,3];
let resultarr = [...new Set(arr)]; 
console.log(resultarr); //[1,2,3]

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log(‘type error!‘)
        return
    }
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (res.indexOf(arr[i]) === -1) {
            res.push(arr[i])
        }
    }
    return res
}

24.如何在CSS中設置頁面中一些元素不顯示在瀏覽器窗口？

display：none;或者visibility:hidden;

25.數組與鏈表的區別？

數組必須事先定義長度，不能適應數據的動態增減，當數據增加時，數組可能會超出原來的定義的個數。當數據減少時，數據的單元空間會浪費。

鏈表動態進行存儲分配，可以適應數據的插入和刪除。

26.this:

1.構造函數this指向對象

2.this在setTimeOut指向window

3.this在事件函數中指向調用的標簽

4.this在普通函數中指向，誰調用指向誰

27.DOM優化https://www.cnblogs.com/mopagunda/p/4740678.html(重繪或重畫)

增加、刪除和修改可見DOM元素

頁面初始化的渲染

移動DOM元素

修改CSS樣式，改變DOM元素的尺寸

DOM元素內容改變，使得尺寸被撐大

瀏覽器窗口尺寸改變

瀏覽器窗口滾動

實時搜索框：
var time= null
input.addEventListener("input",function(){
       cleartimeout(time)
      time=setTimeout(()=>{search})
})

28.閉包：受作用域的影響，父級無法訪問到子集的變量值，使用閉包。指有權訪問另一個函數作用域中的變量的函數。場景，函數座位返回值，函數作為參數傳遞。特性，函數嵌套函數，內部可以用用外部的參數和變量，參數不可回收

作用域鏈：查找變量的過程中，先找自己的局部環境有沒有聲明或者函數，有的話有沒有賦值，函數內部沒有的話向上一級。局部變量，寫在函數中的變量。全局變量，全局範圍的聲明或者只有賦值沒有聲明

原型鏈：通過prototype對象指向父類對象，直到指向object對象為止，形成一個原型鏈條。數組對象和函數都有一個_proto_（隱式原型），所有函數都有prototype，_proto_（隱式原型）屬性值指向他的構造函數的prototype值，當找一個對象的屬性時，如果這個對象沒有，則會去找他的_proto_（他的構造函數的propotype）

29.vue的原理:

通過observer監聽model的數據變化，object.defineProperty()劫持各個屬性的setter和getter，complie來解析編譯模板指令，利用watcher作為兩者的橋梁，達成雙向數據綁定。轉載https://blog.csdn.net/lizidemao/article/details/83751690

30.事件委托或者代理

31.vuex

32.border1px

33.bind

34.promise

35.數組的方法

前端相關知識點