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 浮動(dòng)相關(guān)

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

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

因?yàn)楦叨人莸拇嬖冢ㄟ@往往不是我們所期望的），必須要清除浮動(dòng)，下面介紹清除浮動(dòng)的幾種方式：
•在浮動(dòng)元素后添加樣式含有“clear：both”的元素

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

也可以添加br標(biāo)簽，其自帶clear：both屬性

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

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

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

利用這種方式不存在結(jié)構(gòu)和語(yǔ)義化問(wèn)題而且代碼量極少，然而在內(nèi)容增多的時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無(wú)法顯示需要溢出的元素。
•利用：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>

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

Reference
iyunlu.com/view/css-xht

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

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

4 盒模型(Box Model)

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

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

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

在CSS3中利用box-sizing保留了兩種盒子模型，當(dāng)我們?cè)O(shè)置box-sizing: content-box（默認(rèn)），采用的是W3C標(biāo)準(zhǔn)盒模型，當(dāng)設(shè)置box-sizing:border-box時(shí)，采用的是IE盒模型。

5 CSS reset（重置）

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

*{
 margin:0;
 padding:0;
}

這種方式雖然簡(jiǎn)單但太過(guò)“暴力”，因?yàn)楹芏嘁叵馾iv、li等本身默認(rèn)就沒(méi)有margin、padding樣式，這無(wú)異于造成大量冗余，更推薦的方式根據(jù)自己需要編寫reset代碼。

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

6 CSS hack

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

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

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

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

IE條件注釋是微軟從IE5開始就提供的一種非標(biāo)準(zhǔn)邏輯語(yǔ)句。比如針對(duì)所有IE：

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

針對(duì)IE6及以下版本：

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

這類Hack不僅對(duì)CSS生效，對(duì)寫在判斷語(yǔ)句里面的所有代碼都會(huì)生效。

Reference

http://www.dbjr.com.cn/css/226888.html

7 優(yōu)雅降級(jí)（graceful degradation)與漸進(jìn)增強(qiáng)(progressive enhancement)

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

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

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

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

利用CSS Reset(參見第5條）
•IE6的雙倍邊距BUG，在塊級(jí)元素浮動(dòng)后本來(lái)外邊距10px,但I(xiàn)E解釋為20px

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

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

通過(guò)這種下面的方式可以解決：

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

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

通過(guò)條件判斷分別寫兩條綁定語(yǔ)句或者使用jquery這類web框架庫(kù)綁定。
•標(biāo)準(zhǔn)瀏覽器采用事件捕獲的方式，而IE采用的是事件冒泡機(jī)制

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

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

Part2 其它

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

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

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

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

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

400 Bad Request 請(qǐng)求出現(xiàn)語(yǔ)法錯(cuò)誤。

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

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

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

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

2 手寫ajax請(qǐng)求

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

//get請(qǐng)求
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請(qǐng)求
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也是源自該方法。

要了解詳細(xì)XHR2推薦 XMLHttpRequest Level 2 使用指南

3 跨域問(wèn)題

當(dāng)我們?cè)陧?yè)面中通過(guò)ajax請(qǐng)求其它服務(wù)器的數(shù)據(jù)時(shí)，由于瀏覽器對(duì)于JavaScript的同源策略，客戶端就會(huì)發(fā)生跨域問(wèn)題。所謂同源策略，指的是一段腳本只能請(qǐng)求來(lái)自相同來(lái)源（相同域名、端口號(hào)、協(xié)議）的資源。

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

那么該如何解決這類跨域問(wèn)題？

（1）利用CORS跨域

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

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

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

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

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

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

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

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

（3）利用window.name進(jìn)行跨域

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

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

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

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

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

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

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

（4) 使用window.postMessage進(jìn)行跨域

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

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

請(qǐng)參看博主的另外兩篇文章：

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

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

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

博文作者：vicfeel

最新評(píng)論