Part1 CSS相關(guān)

1 內(nèi)聯(lián)元素（inline-element）和塊元素（block element）分別有哪些

常見內(nèi)聯(lián)元素（行內(nèi)元素）有a、b、span、i 、em、input、select 、img等
常見的塊元素有div、ul、li、h1~h6、talbe、ol、 ul、td、p等

2 浮動相關(guān)

浮動布局指將元素脫離普通流/文檔流，使其可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬于文檔中的普通流，當一個元素浮動之后，不會影響到塊級元素的布局而只會影響內(nèi)聯(lián)元素的排列。
正因為浮動元素脫離了文檔流，其父級元素并不知道它的存在，因此會表現(xiàn)為高度為0，無論浮動元素如何變化，其父級元素也不會隨它變化將其包裹，這種現(xiàn)象也叫作“高度塌陷”。
下面的例子中，不管#floatDom高度如何變化，#parent高度始終為0，這將導(dǎo)致父元素邊框不能被撐開，背景不能顯示等問題

<div id="parent">
 <div id="floatDOM" style="float:left;width:300px;height:300px;">
 <div style="clear:both">
</div>

因為高度塌陷的存在（這往往不是我們所期望的），必須要清除浮動，下面介紹清除浮動的幾種方式：
•在浮動元素后添加樣式含有“clear：both”的元素

<div id="parent">
 <div id="floatDOM" style="float:left;width:300px;height:300px;">
 <div style="clear:both">
</div>

也可以添加br標簽，其自帶clear：both屬性

<div id="parent">
 <div id="floatDOM" style="float:left;width:300px;height:300px;">
 <br/>
</div>

利用這種方式清除浮動的優(yōu)點在于通俗易懂，容易掌握，缺點也很明顯，增加了很多無意義的標簽，這個在后期維護中是很痛苦的。
•為父元素添加樣式“overflow:hidden"

<div id="parent" style="overflow:hidden">
 <div id="floatDOM" style="float:left;width:300px;height:300px;">
</div>

利用這種方式不存在結(jié)構(gòu)和語義化問題而且代碼量極少，然而在內(nèi)容增多的時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素。
•利用：after偽元素

<style type="text/css">
 .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
 .clearfix { *zoom:1; }
</style>

<div id="parent" class="clearfix">
 <div id="floatDOM" style="float:left;width:300px;height:300px;">
</div>

利用這種方式，僅需在目標元素上添加一個類，也是目前使用最多的一種方式。

Reference
iyunlu.com/view/css-xht

3 相對布局（relative）和絕對布局的區(qū)別（absolute）

相對布局和絕對布局最本質(zhì)的區(qū)別在于是否脫離文檔流。
相對布局未脫離文檔流，即設(shè)置元素相對布局后，文檔流仍然保持其原始的位置，通過設(shè)置top、left等屬性可設(shè)置其相對于原始位置的偏移量。
絕對布局是脫離文檔流的，即文檔流中的要素并不知道該絕對布局要素的存在，絕對布局的定位是相對于父元素中具有相對布局或絕對布局的要素，若都不存在則相對于body布局。

4 盒模型(Box Model)

盒模型定義了一個元素的顯示形式，包括content（內(nèi)容）、padding（內(nèi)邊距）、border（邊界）以及margin（外邊距）幾部分組成，目前有兩種盒模型標準，一種是W3C標準盒子模型，還有一種是IE盒子模型，采用的是Microsoft自己的標準。

這兩種盒模型的區(qū)別主要在于元素寬度的計算。標準模式下css中定義的width即為content（內(nèi)容）的寬度，整個元素在頁面中占有的寬度，計算公式為：

而在IE盒子模型中，css中定義的width為content + padding + border，因此在IE盒子模型中，整個元素在頁面中占有的寬度為(高度同理）

在CSS3中利用box-sizing保留了兩種盒子模型，當我們設(shè)置box-sizing: content-box（默認），采用的是W3C標準盒模型，當設(shè)置box-sizing:border-box時，采用的是IE盒模型。

5 CSS reset（重置）

每個瀏覽器都有一些自帶的樣式，而且各個瀏覽器這些自帶的樣式往往又存在不同，這給我們布局上帶來了一些不便。因此在實踐中往往需要對瀏覽器的css樣式進行“清零”，即CSS reset。最簡單的一種reset代碼如下：

*{
 margin:0;
 padding:0;
}

這種方式雖然簡單但太過“暴力”，因為很多要素像div、li等本身默認就沒有margin、padding樣式，這無異于造成大量冗余，更推薦的方式根據(jù)自己需要編寫reset代碼。

Reference:
www.zhangxinxu.com/wordpress/2010/08/html5-css-reset

6 CSS hack

由于不同的瀏覽器對CSS的解析和支持是不同的，這會導(dǎo)致相同的CSS代碼在不同瀏覽器中的顯示方式并不是完全一致的，這就需要通過CSS Hack來解決不同瀏覽器的兼容性問題。針對不同瀏覽器寫不同的樣式的這個過程就稱為CSS hack。

CSS Hack常見的形式有如下幾種：
•屬性Hack

比如IE6能識別_width以及*width，而在IE7中能識別*width,但是不能識別_width,在FireFox中兩個都不識別。
•選擇符Hack

比如IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。
•條件Hack

IE條件注釋是微軟從IE5開始就提供的一種非標準邏輯語句。比如針對所有IE：

<!–[if IE]>
 <!–Your Code–>
 <![endif]–>

針對IE6及以下版本：

<!–[if lt IE 7]>
<!–Your Code–>
<![endif]–>

這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。

Reference

http://www.dhdzp.com/css/226888.html

7 優(yōu)雅降級（graceful degradation)與漸進增強(progressive enhancement)

漸進增強指針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優(yōu)雅降級指一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。

兩者的區(qū)別在于優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非?；A(chǔ)的，能夠起作用的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。

8 說出遇到的瀏覽器兼容問題
•不同瀏覽器中顯示的內(nèi)邊距、外邊距不同，如ul標簽在FireFox中默認是有padding值的，而在IE中只有margin有值

利用CSS Reset(參見第5條）
•IE6的雙倍邊距BUG，在塊級元素浮動后本來外邊距10px,但IE解釋為20px

將其該塊級元素display設(shè)置為inline
•IE6中不支持min-height

min-height的作用是作用是當容器的內(nèi)容較少時，能保持一個最小的高度，以免破壞了布局或UI設(shè)計效果。而當容器內(nèi)的內(nèi)容增加的時候，容器能夠自動的伸展以適應(yīng)內(nèi)容的變化。

通過這種下面的方式可以解決：

#targetDom{
  background:#ccc;
  min-height:100px;
  height:auto!important;
  height:100px;
  overflow:visible;
 }

•在標準的事件綁定中綁定事件的方法函數(shù)為addEventListener,而IE使用的是attachEvent

通過條件判斷分別寫兩條綁定語句或者使用jquery這類web框架庫綁定。
•標準瀏覽器采用事件捕獲的方式，而IE采用的是事件冒泡機制

后來標準認為冒泡更合理，利用設(shè)置addEventListener第三個參數(shù)兼容兩種機制，事件冒泡為默認值。
•事件處理中的event屬性IE中獲取方式和標準瀏覽器不同

標準瀏覽器是作為參數(shù)帶入，而ie是window.event方式獲得，獲得目標元素ie為e.srcElement 標準瀏覽器為e.target

Part2 其它

1 了解常用http狀態(tài)碼

200 OK 一切正常，對GET和POST請求的應(yīng)答文檔跟在后面。

201 Created服務(wù)器已經(jīng)創(chuàng)建了文檔，Location頭給出了它的URL。

202 Accepted 已經(jīng)接受請求，但處理尚未完成。

304 Not Modified 客戶端有緩沖的文檔并發(fā)出了一個條件性的請求（一般是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）。服務(wù)器告 訴客戶，原來緩沖的文檔還可以繼續(xù)使用。

400 Bad Request 請求出現(xiàn)語法錯誤。

404 Not Found 無法找到指定位置的資源。這也是一個常用的應(yīng)答。

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

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

502 Bad Gateway 服務(wù)器作為網(wǎng)關(guān)或者代理時，為了完成請求訪問下一個服務(wù)器，但該服務(wù)器返回了非法的應(yīng)答。

2 手寫ajax請求

//在IE5和IE6中模擬XMLHttpRequest方法
if(window.XMLHttpRequest === undefined){
 window.XMLHttpRequest = function(){
  try{
   return new ActiveXObject("Msxml2.XMLHttp.6.0"); //可用，使用最新ActiveX對象
  }
  catch(e1){
   try{
    return new ActiveXObject("Msxml2.XMLHttp.3.0");//不可用，退后更早的版本
   }
   catch(e2){
    throw new Error("XMLHttpRequest is not supported");
   }
  }
 }
}

//get請求
function xhrGet(url,callback){
 var request = new XMLHttpRequest();
 request.open('GET',url,true);
 request.onreadystatechange = function(){
  if(request.readyState === 4 && request.status == 200){
   callback&&callback(request.responseText);
  }
 };
 request.send(null);
}

//post請求
function xhrPost(url,data,callback){
 var request = new XMLHttpRequest();
 request.open('POST',url,true);
 request.setRequestHeader('Content-Type','application/json');
 request.onreadystatechange = function(){
  if(request.readyState === 4 && request.status == 200){
   callback&&callback(request);
  }
 };
 request.send(JSON.stringfy(data));
}

這是XMLHttpRequest傳統(tǒng)的用法，XMLHttpRequest Level 2提出了很多新的方法，我們常提到的CORS也是源自該方法。

要了解詳細XHR2推薦 XMLHttpRequest Level 2 使用指南

3 跨域問題

當我們在頁面中通過ajax請求其它服務(wù)器的數(shù)據(jù)時，由于瀏覽器對于JavaScript的同源策略，客戶端就會發(fā)生跨域問題。所謂同源策略，指的是一段腳本只能請求來自相同來源（相同域名、端口號、協(xié)議）的資源。

如果上面XMLHttpRequest請求的服務(wù)地址與當前文件不同源的話，瀏覽器中會出現(xiàn)如下錯誤：

那么該如何解決這類跨域問題？

（1）利用CORS跨域

"跨域資源共享"（Cross-origin resource sharing，簡稱CORS）。CORS是是在XHR2中拓展的能力，使用方法很簡單，在服務(wù)端設(shè)置：
Header set Access-Control-Allow-Origin * 

這種設(shè)置將接受所有域名的跨域請求，也可以指定具體網(wǎng)址，也可以對域名進行限定：
Header set Access-Control-Allow-Origin http://www.test.com 

然而，這種方式的局限性在于要求客戶端支持，并且服務(wù)端進行相關(guān)設(shè)置。在這兩者滿足的情況下，通過CORS進行跨域不僅支持所有類型的HTTP請求，而且開發(fā)者可以使用普通的XMLHttpRequest發(fā)起請求和獲得數(shù)據(jù)，比起JSONP有更好的錯誤處理。

（2）利用JSONP實現(xiàn)跨越

對于較老的瀏覽器，它們往往不支持CORS，因此使用JSONP進行跨域也是很常見的一種方式。
我們知道在網(wǎng)頁中通過<script>元素的src指定加載目標腳本時是不受同源策略的影響的，因此可以使用它們從其他服務(wù)器請求數(shù)據(jù)，這種利用<script>元素作為Ajax傳輸?shù)募夹g(shù)就稱為JSONP。

JSONP實現(xiàn)的原理如下：

function getJSONP(url, callback){
  var funcName = getUniqueName()；//利用時間戳或指自增計數(shù)器獲得唯一函數(shù)名
  
  url += "?callback=" + funcName; //將函數(shù)名作為參數(shù)添加至url中
  
  var script = document.createElement('script');//動態(tài)構(gòu)建script標簽
  
  //回調(diào)函數(shù)
  getJSONP[funcName] = function(response){
   try{
    callback(response); //處理響應(yīng)數(shù)據(jù)
   }
   finally{
    //即使回調(diào)函數(shù)或響應(yīng)拋出錯誤，清除動態(tài)增加內(nèi)容
    delete getJSONP[funcName];
    script.parentNode.removeChild(scirpt);
   }
  }
  
  //觸發(fā)HTTP請求
  script.src = url;
  document.body.appendChild(script);
 }

JSONP也存在一些弊端，首先JSONP支持GET不支持POST方法，另外使用<script>元素進行Ajax請求，這意味著允許Web頁面可以執(zhí)行遠程服務(wù)器發(fā)送過來的任何JavaScript代碼，因此對于不信任的服務(wù)器，不應(yīng)該采用該技術(shù)。

（3）利用window.name進行跨域

window對象有個name屬性，該屬性有個特征：即在一個窗口(window)的生命周期內(nèi),窗口載入的所有的頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的權(quán)限，window.name是持久存在一個窗口載入過的所有頁面中的，并不會因新頁面的載入而進行重置，因此可以借助window.name在不同源的頁面中傳遞數(shù)據(jù)。

如www.a.com/a.html想要獲得www.b.com/b.html中的數(shù)據(jù),原理如下：

a) 在b.html中將數(shù)據(jù)存儲在window.name中

b) 在a.html中構(gòu)建一個隱藏（display：none）的iframe標簽，假設(shè)id設(shè)為proxy，src設(shè)置為和a.html同源即可。

c) 通過如下代碼在a.html中獲取到data

 var proxy = document.getElementById('proxy');
 proxy.onload = function(){
  var data = proxy.contentWindow.name;//獲取到數(shù)據(jù)
 }

d) 移除相關(guān)元素

（4) 使用window.postMessage進行跨域

這種方式比較簡單，在a頁面中利用windowObj.postMessage(message, targetOrigin)向目標頁面發(fā)送信息，而在b頁面中通過監(jiān)聽message事件獲取信息。這種方式是在HTML5中新增的方法，對于IE6、IE7等老版本瀏覽器無法使用。

4 如何提高網(wǎng)站性能

請參看博主的另外兩篇文章：

關(guān)于提高網(wǎng)站性能的幾點建議

關(guān)于提高網(wǎng)站性能的幾點建議2

發(fā)現(xiàn)新內(nèi)容會持續(xù)更新...

博文作者：vicfeel