一、HTML 方面
1、三欄布局，左右固定，中間自適應？
左中右三欄寬度自適應于瀏覽器的方法有三個：絕對定位法，margin負值法以及自身浮動法。
一、絕對定位法：左右兩欄采用絕對定位，分別固定于頁面的左右兩側，中間的主體欄用左右margin值撐開距離。于是實現了三欄自適應布局。
這種方式三個div的順序可以任意改變。
此方法的優點在于：理解容易，上手簡單，受內部元素影響而破壞布局的概率低，就是比較經得起折騰。
缺點在于：如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。
<body>
? ? <div class="main"></div>
? ? <div class="left"></div>
? ? <div class="right"></div>
</body>
.main {
? ? margin: 0 200px;
? ? background: red;
}? ?
.left {
? ? position: absolute;
? ? top: 0;
? ? left: 0;
? ? width: 200px;
? ? height: 100%;
}
.right {
? ? position: absolute;
? ? top: 0;
? ? right: 0;
? ? width: 200px;
? ? height: 100%;
}
二、自身浮動法：左欄左浮動，右欄右浮動，中間欄放最后
這種方式需要注意三個div的順序，左右兩欄的順序不分先后，但是中間一欄必須放在最后。
此方法的優點是：代碼足夠簡潔與高效
缺點是：中間主體存在克星，clear:both屬性。如果要使用此方法，需避免明顯的clear樣式。
<body>
? <div class="left"></div>
? <div class="right"></div>
? <div class="main"></div>
</body>
.main {
margin :0 200px;
}
.left {
float: left;
width: 200px;
height: 100%;
}
.right {
float: right;
width: 200px;
height: 100%;
}
三、margin負值法：左右兩欄均左浮動，左右兩欄采用負的margin值。中間欄被寬度為100%的浮動元素包起來。
左右兩欄div的順序不分先后，但是主體部分div要放前面。
此方法的優點在于：三欄相互關聯，可謂真正意義上的自適應，有一定的抗性——布局不易受內部影響。
缺點在于：相對比較難理解些，上手不容易，代碼相對復雜。出現百分比寬度，過多的負值定位，如果出現布局的bug，排查不易。
<body>
? ? <div class="main">
? ? ? ? <div class="content"></div>
? ? </div>
? ? <div class="left"></div>
? ? <div class="right"></div>
</body>
.main {
? ? float: left;
? width:100%;
}
.content {
? ? margin:0 200px;
? ? height:100%;
}
.left {
? ? float: left;
? ? width: 200px;
? ? margin-left: -100%;
}
.right {
? ? float: left;
? ? width: 200px;
? ? margin-left: -200px;
}
二、CSS 方面
1、css盒模型有哪些及區別？
IE盒子模型box-sizing:border-box;（怪異模式）
W3C標準盒子模型 box-sizing:content-box;（標準模式）默認模式
2、同上問題，怎么相互轉換？
來說說為什么要將標準盒模型轉換為IE盒模型
為什么IE盒模型更容易開發？先來解決這個問題。從上面兩張圖片對比可以看出來，標準的盒模型padding，border是不算在寬度之內的，所以當你比如要在一個容器里并排顯示兩個同樣的盒子。你用標準模型時肯定會這樣設置每個盒子width:50%.但是當你查看時會發現兩個盒子緊緊挨在一起實在是不美觀，所以你又設置padding:0 5%；然而這時候兩個盒子寬度又超過了大容器的總寬度，所以你又得去調整盒子的width:40% 這樣確實可以解決問題，可是這樣你不覺得很不方便嗎。。好了這時候就可以看出IE盒模型的好處了。就將兩個盒子的寬度設置為50%，這時候就算你再怎么去調整padding都會在兩個盒子的內部去調整，不會再影響布局。簡直方便到不要不要的~~
3、頁面導入樣式時，使用link和@import有什么區別？
1.link屬于HTML標簽，除了加載CSS外，還能用于定義RSS，定義rel連接屬性等作用；而@import是CSS提供，只能加載CSS;
2.頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載；
import是CSS2.1提出的，只在IE5以上才能被識別，而link是HTML標簽，無兼容問題；
4、清楚浮動有哪些方式？比較好的方式是哪一種？
1、父級div定義height。
2、結尾處加空div標簽clear：both。
3、父級div定義偽類：after和zoom。
4、父級div定義overflow：hidden。
5、父級div定義overflow：auto。
6、父級div也浮動，需要定義寬度。
7、父級div定義display：table。
8、結尾處加br標簽clear:both。
比較好的是第3種，好多網站都這樣用
5、CSS實現垂直水平居中？
HTML 結構
<div class="wrapper">
<div class="content"></div>
</div>
CSS 結構
.wrapper {
? ? position: relative;
}
.content {
? ? width: 200px;
? ? height: 200px;
? ? position: absolute;? ? ? ? //父元素需要相對定位
? ? top: 50%;
? ? left: 50%;
? ? margin-top: -100px ;? //二分之一的height，width
? ? margin-left:? -100px;
}
第二種方法
.content {
? ? position: absolute;
? ? left: 50%;
? ? top: 50%;
? ? width: 200px;
? ? height: 200px;
? ? transform: translate(-50%,-50%);
? ? }
6、css選擇符有哪些？哪些屬性可以繼承？
類型選擇符（body）、群組選擇符（h1，h2，h3，span）、包含選擇符（h2 span）、ID選擇符（#id）、Class選擇符（.content）
CLASS屬性，偽類A標簽，列表ul、li、dl、dd、dt可以繼承
優先級算法：
1.優先級就近原則，同權重情況下樣式定義最近者為準;
2.載入樣式以最后載入的定位為準;
3.!important >? id > class > tag?
4.important 比 內聯優先級高，但內聯比 id 要高
7、CSS3新增偽類？
1)? ? ? p:first-of-type? 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。
2)? ? ? p:last-of-type? 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。
3)? ? ? p:only-of-type? 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。
4)? ? ? p:only-child? ? 選擇屬于其父元素的唯一子元素的每個 <p> 元素。
5)? ? ? p:nth-child(2)? 選擇屬于其父元素的第二個子元素的每個 <p> 元素。
6)? ? ? :enabled :disabled 控制表單控件的禁用狀態。
7)? ? ? :checked? ? ? ? 單選框或復選框被選中。
8、CSS3有哪些新特性？
1)? ? CSS3實現圓角（border-radius），陰影（box-shadow），
2)? ? 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
3)? ? transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
4)? ? 增加了更多的CSS選擇器? 多背景 rgba
5)? ? 在CSS3中唯一引入的偽元素是 ::selection.
6)? ? 媒體查詢，多欄布局
7)? ? border-image
9、display:none;與visibility:hidden的區別是什么？
display:none;使用該屬性后，HTML元素（對象）的寬高，高度等各種屬性值都將“丟失”；
visibility:hidden;使用該屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在，也即是說它仍然具有高度，寬度等屬性值。
10、怎么解決邊界重疊問題？
11、display:inline-block的間隙問題和解決辦法？
**原因：**inline-block元素間有空格或是換行，因此產生了間隙。?
三、JS 方面
1、js三種存儲方式區別？
sessionStorage、localStorage、cookier
相同點：都保存在瀏覽器端，同源的
不同點：
①傳遞方式不同
cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
②數據大小不同
cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下。
存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
③數據有效期不同
sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；
localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；
cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。
④作用域不同
sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；
localStorage 在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。
Web Storage 支持事件通知機制，可以將數據更新的通知發送給監聽者。
Web Storage 的 api 接口使用更方便。
2、null 與 undefined 區別？
null： Null類型，代表“空值”，代表一個空對象指針，使用typeof運算得到 “object”，所以你可以認為它是一個特殊的對象值。
undefined： Undefined類型，當一個聲明了一個變量未初始化時，得到的就是undefined。
3、this 指向幾種情況？
1：如果一個函數中有this，但是它沒有被上一級的對象所調用，那么this指向的就是window，這里需要說明的是在js的嚴格版中this指向的不是window，但是我們這里不探討嚴格版的問題，你想了解可以自行上網查找。
2：如果一個函數中有this，這個函數有被上一級的對象所調用，那么this指向的就是上一級的對象。
3：如果一個函數中有this，這個函數中包含多個對象，盡管這個函數是被最外層的對象所調用，this指向的也只是它上一級的對象。
4、繼承幾種方式？
5、防止事件冒泡與取消默認事件、事件捕獲？
防止冒泡
w3c的方法是e.stopPropagation()，IE則是使用e.cancelBubble = true
取消默認事件
w3c的方法是e.preventDefault()，IE則是使用e.returnValue = false;
DOM事件流（event? flow ）存在三個階段：事件捕獲階段、處于目標階段、事件冒泡階段。
事件捕獲（event? capturing）：通俗的理解就是，當鼠標點擊或者觸發dom事件時，瀏覽器會從根節點開始由外到內進行事件傳播，即點擊了子元素，如果父元素通過事件捕獲方式注冊了對應的事件的話，會先觸發父元素綁定的事件。
事件冒泡（dubbed? bubbling）：與事件捕獲恰恰相反，事件冒泡順序是由內到外進行事件傳播，直到根節點。
無論是事件捕獲還是事件冒泡，它們都有一個共同的行為，就是事件傳播，它就像一跟引線，只有通過引線才能將綁在引線上的鞭炮（事件監聽器）引爆，試想一下，如果引線不導火了，那鞭炮就只有一響了！！！
dom標準事件流的觸發的先后順序為：先捕獲再冒泡，即當觸發dom事件時，會先進行事件捕獲，捕獲到事件源之后通過事件傳播進行事件冒泡。不同的瀏覽器對此有著不同的實現，IE10及以下不支持捕獲型事件，所以就少了一個事件捕獲階段，IE11、Chrome 、Firefox、Safari等瀏覽器則同時存在。
說到事件冒泡與捕獲就不得不提一下兩個用于事件綁定的方法addEventListener、attachEvent。當然還有其它的事件綁定的方式這里不做介紹。
addEventListener(event, listener, useCapture)
·參數定義：event---（事件名稱，如click，不帶on），listener---事件監聽函數，useCapture---是否采用事件捕獲進行事件捕捉，
默認為false，即采用事件冒泡方式
addEventListener在 IE11、Chrome 、Firefox、Safari等瀏覽器都得到支持。
attachEvent(event,listener)
·參數定義：event---（事件名稱，如onclick，帶on），listener---事件監聽函數。
attachEvent主要用于IE瀏覽器，并且僅在IE10及以下才支持，IE11已經廢了這個方法了（微軟還是挺識趣的，慢慢向標準靠攏）。
6、什么是Ajax，同步與異步區別，創建一個Ajax？
AJAX是“Asynchronous JavaScript and XML”的縮寫。他是指一種創建交互式網頁應用的網頁開發技術。
同步：阻塞的，瀏覽器向服務器請求數據，服務器比較忙，瀏覽器一直等著(頁面白屏)，直到服務器返回數據，瀏覽器才能顯示頁面。
異步：非阻塞的，瀏覽器向服務器請求數據，服務器比較忙，瀏覽器可以自如的干原來的事情(顯示頁面)，服務器返回數據的時候通知瀏覽器一聲，瀏覽器把返回的數據再渲染到頁面，局部更新。
//ajax編寫步驟//
//1、創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
//2、設置請求參數
xhr.open(請求方式,請求地址,異步或同步);
//3、設置回調函數
xhr.onreadystatechange = function(){
? ? if(xhr.reasyState===4){
? ? ? ? if(xhr.status === 200) {
? ? ? ? ? ?//5、接受響應
? ? ? ? ? ? console.log(xhr.responseText);
? ? ? ? }
? ? }
}
// 4、發送請求
xhr.send();
7、如何解決跨域問題？
理解跨域的概念：協議、域名、端口都相同才同域，否則都是跨域。
出于安全考慮，服務器不允許ajax跨域獲取數據，但是可以跨域獲取文件內容，所以基于這一點，可以動態創建script標簽，使用標簽的src屬性訪問js文件的形式獲取js腳本，并且這個js腳本中的內容是函數調用，該函數調用的參數是服務器返回的數據，為了獲取這里的參數數據，需要事先在頁面中定義回調函數，在回調函數中處理服務器返回的數據，這就是解決跨域問題的主流解決方案。
8、GET和POST的區別，何時使用POST?
GET:一般用于信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，一般在2000個字符，有的瀏覽器是8000個字符。
POST：一般用于修改服務器上的資源，對所發送的信息沒有限制。
以下情況中，請使用POST請求：
①、無法使用緩存文件(更新服務器上的文件或數據庫)
②、向服務器發送大量數據(POST沒有數據量限制)
③、發送包含未知字符的用戶輸入時，POST比GET更穩定也更可靠。
9、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什么？
分為4個步驟：
1. 當發送一個 URL 請求時，不管這個 URL 是 Web 頁面的 URL 還是 Web 頁面上每個資源的 URL，瀏覽器都會開啟一個線程來處理這個請求，同時在遠程 DNS 服務器上啟動一個 DNS 查詢。這能使瀏覽器獲得請求對應的 IP 地址。
2. 瀏覽器與遠程 Web 服務器通過 TCP 三次握手協商來建立一個 TCP/IP 連接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試建立起通信，而后服務器應答并接受客戶端的請求，最后由客戶端發出該請求已經被接受的報文。
3. 一旦 TCP/IP 連接建立，瀏覽器會通過該連接向遠程服務器發送 HTTP 的 GET 請求。遠程服務器找到資源并使用 HTTP 響應返回該資源，值為 200 的 HTTP 響應狀態表示一個正確的響應。
4. 此時，Web 服務器提供資源服務，客戶端開始下載資源。
