1.盒子模型
1）是什么：每個元素被表示為一個矩形的盒子，由四部分組成：內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）。它在頁面中所占的實際大小（寬高）是content+padding+border+margin之和。
2）盒模型有兩種：標准盒模型（W3C盒模型）、IE盒模型。
3）兩種盒模型的區別：標准盒模型內容大小就是content大小，而IE盒模型內容大小則是content+padding+border總的大小。
4）怎么設置兩種盒模型：通過設置box-sizing屬性為content-box（默認值，標准盒模型）、border-box（IE盒模型）。
5）box-sizing使用場景：若設置子元素的margin或border時可能會撐破父元素的尺寸，就需要使用box-sizing:border-box來將border包含進元素的尺寸中。
2.外邊距重疊（collapsing margins）/margin坍塌
1）是什么：相鄰的兩個或多個普通流中的塊元素，如果它們設置了外邊距，那么在垂直方向上，外邊距會發生重疊，以絕對值大的那個為最終結果顯示在頁面上，即最終的外邊距等於發生層疊的外邊距中絕對值較大者。
2）最終外邊距：margin全為正（取最大值）、margin全為負（取絕對值最大的負數）、margin有正有負（分別取正數最大值a，負數的最大絕對值b，a-b）
3）外邊距重疊的應用：幾個段落一起布局，第一個段落的上外邊距正常顯示，下外邊距與第二個段落的上外邊距重疊。
4）防止外邊距重疊：創建BFC元素。
5）不會發生外邊距重疊的情況：行內元素、浮動元素、絕對定位元素之間的外邊距都不會疊加。
3.BFC（Block Formatting Context，塊級格式化上下文）
1）是什么：決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。簡言之，就是一個特殊的塊，內部的元素和外部的元素不會相互影響。BFC內的盒子會在垂直方向上一個接一個地放置，垂直方向上也會發生外邊距重疊。
2）應用場景：自適應布局（BFC不與float box重疊）、清除浮動（計算BFC的高度時，內部的浮動元素也被計算在內）、防止外邊距重疊。
3）如何觸發BFC：float屬性（不為none）、overflow屬性（不為visible）、position屬性（absolute，fixed）、display屬性（inline-block，table-cell，table-caption，flex，inline-flex）。
4.行內元素有哪些？塊級元素有哪些？空元素（void）有哪些？
1）行內元素：a，b，span，img，input，strong，label，button，select，textarea，em
2）塊級元素：div，ul（無序列表），ol，li，dl（自定義列表），dt（自定義列表項），dd（自定義列表項的定義），p，h1-h6，blockquote（塊引用）
3）空元素（void）：即沒有內容的HTML元素。br（換行），hr（水平分割線），meta，link，input，img
5.doctype 的作用？嚴格模式與混雜模式如何區分？它們有何意義？
1）是什么：DOCTYPE是document type (文檔類型) 的縮寫。 < !DOCTYPE > 聲明位於文檔的最前面，處於標簽之前，它不是html標簽。主要作用是告訴瀏覽器的解析器使用哪種HTML規范或者XHTML規范來解析頁面。
2）應用場景：嚴格模式和混雜模式都是瀏覽器的呈現模式，瀏覽器究竟使用混雜模式還是嚴格模式呈現頁面與網頁中的DTD（文件類型定義）有關，DTD里面包含了文檔的規則。比如：loose.dtd
3）嚴格模式：又稱標准模式，是指瀏覽器按照W3C標准來解析代碼，呈現頁面。
混雜模式：又稱為怪異模式或者兼容模式，是指瀏覽器按照自己的方式來解析代碼，使用一種比較寬松的向后兼容的方式來顯示頁面。
6.HTML5 為什么只需寫< !DOCTYPE HTML> ?
HTML5不基於 SGML （標准通用標記語言），因此不需要對DTD（ DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。）進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）。而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
7.頁面導入樣式時，使用link和@import有什么區別？
1) link屬於XHTML標簽，import是CSS提供的方式。link方式除了CSS，還可以定義RSS，定義rel連接屬性等，而import只能加載CSS。
2) link是頁面加載時同時執行的，而import是在頁面加載完之后，才會執行的。
3) link支持使用Javascript控制DOM去改變樣式；而@import不支持。
4) link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本(IE5及以下)的瀏覽器不支持。
8.介紹一下你對瀏覽器內核的理解？
主要分成兩部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。
渲染引擎：用於獲取html、css和圖片,然后會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。
JS引擎：解析和執行 javascript 來實現網頁的動態效果。
9、常見的瀏覽器內核有哪些？
1）Trident：IE、360
2）Gecko：Firefox
3）Webkit：Safari、Chrome內核原型
4）Chromium/Blink：Chrome
5）Blink：opera
10、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
HTML5 現在已經不是SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
新特性：
- 繪畫canvas
- 用於媒介回放的video 和audio 元素
- 本地離線存儲localStorage 長期存儲數據，瀏覽器關閉后數據不丟失
- sessionStorage 的數據在瀏覽器關閉后自動刪除
- 語意化更好的內容元素，比如：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；
兼容問題：
- IE6/IE7/IE8 支持通過 document.createElment 方法產生的標簽，利用這一特性讓這些瀏覽器支持 HTML5 新標簽。瀏覽器支持新標簽后，還需要添加標簽默認的樣式。
- 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
11.HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
1）使用：
1.頁面頭部像下面一樣加入一個manifest的屬性 html <html manifest = "cache.manifest">
2.在cache.manifest文件的編寫離線存儲的資源
```html
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
```
2）原理：
HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
12.瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
在線的情況下，瀏覽器發現Html頭部有manifest屬性，它會請求manifest文件。
如果是第一次訪問APP，那么瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。
如果已經訪問過APP並且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面。然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源並進行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。
13.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
1）存儲大小
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
2）有效時間
sessionStorage和localStorage：雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
sessionStorage：數據在當前瀏覽器窗口關閉后自動刪除。
cookie：設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。
3）數據與服務器之間的交互方式
cookie的數據會自動的傳遞到服務器，服務器端也可以寫cookie到客戶端。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
14.iframe有那些缺點？
1） iframe會阻塞主頁面的Onload事件；
2）搜索引擎的檢索程序無法解讀這種頁面，不利於SEO;
3）iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript。動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。
15.Label的作用是什么？是怎么用的？（加 for 或 包裹）
1）解釋：label標簽來定義表單控制間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。
2）例子：
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
或者
<label>Date:<input type="text" name="B" /></label>
16.HTML5的form如何關閉自動完成功能？
給不想要的提示信息標簽里設置：autocomplete:off
17.如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
方法1：使用localStorage
<!--在一個標簽頁里面使用 localStorage.setItem(key,value)添加（修改、刪除）內容；--> <input id="name"> <input type="button" id="btn" value="提交"> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ var name=$("#name").val(); localStorage.setItem("name", name); }); }); </script>
<!--在另一個標簽頁里面監聽 storage 事件。 即可得到 localstorge 存儲的值，實現不同標簽頁之間的通信。--> <script type="text/javascript"> $(function(){ window.addEventListener("storage", function(event){ console.log(event.key + "=" + event.newValue); }); }); </script>
方法2：調用cookie+setInterval()
將要傳遞的信息存儲在cookie中，每隔一定時間讀取cookie信息，即可隨時獲取要傳遞的信息。
頁面1：
將：
localStorage.setItem("name", name);
改為：
document.cookie="name="+name;
頁面2：
<script type="text/javascript"> $(function(){ function getCookie(key) { return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key]; } setInterval(function(){ console.log("name=" + getCookie("name")); }, 10000); }); </script>
18.CSS3有哪些新特性？
1.CSS3的選擇器
1）E:last-child 匹配父元素的最后一個子元素E。
2）E:nth-child(n)匹配父元素的第n個子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒數第n個子元素E。
2. @Font-face 特性
Font-face 可以用來加載字體樣式，而且它還能夠加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。
@font-face {
font-family: BorderWeb;
src:url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src:url(RUNICMT0.eot);
}
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
3. 圓角
border-radius: 15px;
4. 多列布局 （multi-column layout）
<div class="mul-col"> <div> <h3>新手上路</h3> <p>新手專區 消費警示 交易安全 24小時在線幫助 免費開店</p> </div> <div> <h3>付款方式</h3> <p>快捷支付 信用卡 余額寶 螞蟻花唄 貨到付款</p> </div> <div> <h3>淘寶特色</h3> <p>手機淘寶 旺信 大眾評審 B格指南</p> </div> </div> .mul-col{ column-count: 3; column-gap: 5px; column-rule: 1px solid gray; border-radius: 5px; border:1px solid gray; padding: 10px ; }
5.陰影（Shadow）
.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}
6.CSS3 的漸變效果
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
這里 linear 表示線性漸變，從左到右，由藍色（#2A8BBE）到紅色（#FE280E）的漸變。
19.px，em和rem的區別
在css中單位長度用的最多的是px、em、rem，這三個的區別是：
一、px是固定的像素，一旦設置了就無法因為適應頁面大小而改變。
二、em和rem相對於px更具有靈活性，他們是相對長度單位，意思是長度不是定死了的，更適用於響應式布局。
三、em是相對於其父元素來設置字體大小的，一般都是以<body>的“font-size”為基准。這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大小。而Rem是相對於根元素<html>，這樣就意味着，我們只需要在根元素確定一個參考值。
總之：對於em和rem的區別一句話概括：em相對於父元素，rem相對於根元素。
20.事件綁定和普通事件有什么區別
普通事件
1、如果說給同一個元素綁定了兩次或者多次相同類型的事件，那么后面的綁定會覆蓋前面 的綁定 ；
2、不支持 DOM 事件流 事件捕獲階段目標元素階段=>事件冒泡階段
var btn=document.getElementByid('ID名') //給相應的DOM節點取一個ID名。
btn.onclick=function(){ alert(1) }; btn.onclick=function(){ alert(2) };
執行上邊代碼只會輸出alert(2);
事件綁定
1.addEventListener不兼容低版本ie
2.普通事件無法取消，
3.addEventListener還支持事件冒泡+事件捕獲。
var btn=document.getElementByid("ID名")； btn.addEventListener("click",function(){ alert('Hello'); },false); btn.addEventListener("click",function(){ alert('Hello'); },false);
執行上邊代碼會先輸出alert(1);在輸出alert(2);
21.document load 和 document ready 的區別
Document.onload: 是在結構和樣式加載完就執行 js 。window.onload：不僅僅要在結構和樣式加載完，還要執行完所有的樣式、圖片這些資源文 件，全部加載完才會觸發 。
22.”==”和“===”的不同
==：會自動轉換類型。
===：先判斷左右兩邊的數據類型，如果數據類型不一致，直接返回 false ，之后才會進行兩邊值的判斷。
23.JavaScript的同源策略
概念：同源策略是瀏覽器的一個安全機制,只有同協議,同域名,同端口才會被視為同源。
目的：是為了保證用戶信息的安全，防止惡意的網站竊取數據。
非同源的限制范圍：
隨着互聯網的發展，同源政策越來越嚴格。目前，如果非同源，共有三種行為受到限制。
1）無法讀取非同源網頁的 Cookie、LocalStorage 和 IndexedDB。
2）無法接觸非同源網頁的 DOM。
3）無法向非同源地址發送 AJAX 請求（可以發送，但瀏覽器會拒絕接受響應）。
跨域通信的方式：
1）JSONP
2）WebSocket
3）CORS
（1）JSONP
利用script標簽的src將其它域的js文件載入,如果在此處動態創建script標簽的話，就能實現對其它域中數據的動態讀取
不過僅僅是取得了數據,還無法在客戶端使用。因此產生jsonp(json with padding ,padding指向json數據中添加函數名)
服務端會對數據添加函數名后返回。
function addScriptTag(src) { var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script); } window.onload = function () { addScriptTag('http://example.com/ip?callback=foo'); } function foo(data) { console.log('Your public IP address is: ' + data.ip); };
foo({ "ip": "8.8.8.8" });
（2）WebSocket
WebSocket是一種通信協議，使用ws://（非加密）和wss://（加密）作為協議前綴。該協議不實行同源政策，只要服務器支持，就可以通過它進行跨源通信。
一、WebSocket目標
在一個單獨的持久性socket連接上提供全雙工、雙向通信。
二、基本原理
在瀏覽器客戶端通過javascript進行初始化連接，就可以監聽相關的事件和調用socket方法來對服務器的消息進行讀寫操作。瀏覽器和服務器只需要做一個握手的動作，他們之間就形成了一條快速通道，可以互相傳送數據。不需要多次創建TCP請求和銷毀，可以節約寬帶和服務器的資源。
三、webSocket如何兼容低瀏覽器？
1、Adobe Flash Socket
2、ActiveX HTMLFile（IE）
3、基於multipart編碼發送XHR
4、基於長輪詢的XHR
（3）CORS
CORS（Cross-Origin Resource Sharing），跨源資源共享，是W3C的一個工作草案，定義了在必須訪問跨源資源時，瀏覽器與服務器該如何溝通。其背后的基本思想是使用自定義的HTTP頭部，讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功還是應該失敗。
24.foo=foo||bar ，這行代碼是什么意思？為什么要這樣寫？
這種寫法稱之為短路表達式
意思為：if(!foo) foo = bar; //如果 foo 存在，值不變，否則把 bar 的值賦給 foo。短路表達式：作為”&&”和”||”操作符的操作數表達式，這些表達式在進行求值時，只要 最終的結果已經可以確定是真或假，求值過程便告終止，這稱之為短路求值。
注意 if 條件的真假判定，記住以下是 false 的情況：
空字符串、false、undefined、null、0
25.正則表達式構造函數 var reg=new RegExp(“xxx”)與正則表達字面量 var reg=//有什么不同？匹配郵箱的正則表達式？
答案：當使用 RegExp()構造函數的時候，不僅需要轉義引號（即\”表示”），並且還需要雙反斜杠（即\表示一個\）。 使用正則表達字面量的效率更高。
郵箱的正則匹配：
var regMail = /^[A-Za-z\d]+[A-Za-z\d\-_\.]*@([A-Za-z\d]+[A-Za-z\d\-]*\.)+[A-Za-z]{2,4}$/;