摘要：搜索引擎中有一個爬蟲模塊，在頁面中使用諸如等強調(diào)式的標(biāo)簽，有利于，說白了就是有利于被搜索到。定位相對定位不影響元素本身特性不使元素脫離文檔流。定時器如果是由事件控制的，要先關(guān)再開，避免多次觸發(fā)而混亂。

CSS篇

注意：css注釋使用/ /，而不是或者//，否則很容易導(dǎo)致不明錯誤?。?！

div

padding：內(nèi)邊距。盒子內(nèi)容與盒子邊框的距離設(shè)置，相當(dāng)于給盒子加了厚度，使用此屬性后會改變盒子整體大?。ㄒ话銜O(shè)置weight/height=原來weight/height-padding值；

margin：外邊距。盒子與盒子之間的距離設(shè)置。需要注意的幾個問題：

外邊距會疊壓。例如設(shè)置了上面的div的margin-bottom，又設(shè)置了下面的div的margin-top，結(jié)果兩個div的距離不是兩個margin值之和，而是最后一個設(shè)置的margin值；

父子級包含時子級的margin會傳遞給父級，如：

頁面效果是兩個div組成的整體距離外部上方10px，而兩個div之間不會相距10px。若想要子div上邊框距離父div10px，應(yīng)使用padding（設(shè)置父div的padding）；

auto屬性設(shè)置后，拉伸縮小瀏覽器后，div位置保持不變；

font

font-size：文本字體，最好設(shè)置為偶數(shù)；

text-indent：首行空格，使用em或px單位，一般使用em，表示首行縮進多少個字；

line-height：行高，他的值=font-size+文字上下間距，即文字會在一個line-height高度的框中居中。

a標(biāo)簽

使用target屬性設(shè)置在原頁面還是新開頁面打開鏈接；

在head中全局定義鏈接打開方式；

當(dāng)a標(biāo)簽的href不是網(wǎng)址而是文件名（如xxx.doc等）時，點擊后將會下載對應(yīng)的文件；

當(dāng)a標(biāo)簽的href是一個id時，稱為錨點，點擊后將跳轉(zhuǎn)到對應(yīng)id位置；

4個偽類：

link:未訪問（默認(rèn)，初始狀態(tài)）

hover:鼠標(biāo)懸停（鼠標(biāo)劃過）

active:鏈接激活（鼠標(biāo)按下瞬間）

visited:訪問過后（點擊過后）
4個偽類優(yōu)先級相同，所以要注意順序，若將visited放在最后，點擊一次過后（發(fā)現(xiàn)谷歌瀏覽器第一次就失效了），hover和active將會失效，因為visited放在最后從而優(yōu)先級最高了。

一般使用順序為：link、visited、hover、active。記憶方法：love hate。
其他標(biāo)簽也有這4個偽類，但ie6只支持a標(biāo)簽的這4個偽類。

SEO

SEO：搜索引擎優(yōu)化。搜索引擎中有一個爬蟲模塊，在頁面中使用諸如h1/h2/h3/strong/em等強調(diào)式的標(biāo)簽，有利于seo，說白了就是有利于被搜索到。

樣式優(yōu)先級

類型 < class < id < 行間樣式 < js；

同一優(yōu)先級時，定義的層次越多，優(yōu)先級越高，如 div p{xxx} > p{xxx}；

同一優(yōu)先級且層次數(shù)相同時，定義順序越后，優(yōu)先級越高。

css reset

有些標(biāo)簽有默認(rèn)的樣式，如body默認(rèn)有8px的外邊距，p默認(rèn)有16px的外邊距，ol默認(rèn)每項前面加數(shù)字等。由于不同的瀏覽器可能會有不同的顯示效果，為了做到瀏覽器兼容，首先要把默認(rèn)樣式重置(css reset)，然后再加自己的樣式慢慢調(diào)試；

不推薦使用*{xxx:none/0}來重置默認(rèn)樣式，因為這樣會降低性能，一般使用復(fù)合樣式羅列各種標(biāo)簽進行重置。

標(biāo)簽分類

內(nèi)聯(lián)標(biāo)簽(inline)：

默認(rèn)可以與其他內(nèi)聯(lián)標(biāo)簽同行顯示；

不支持width和height；

不支持margin和padding；

代碼換行將會顯示一個空格（空格大小=字體大小/2）；

內(nèi)容會撐開寬度。

塊標(biāo)簽(block)：

默認(rèn)獨自占一行顯示；

沒有寬度時，默認(rèn)撐滿一行；

支持所有css命令。

inline-block標(biāo)簽

支持寬高；

沒有寬高時內(nèi)容撐開寬度；

同行顯示；

ie6/7不支持inline-block；

img標(biāo)簽為inline-block標(biāo)簽。

可用display屬性轉(zhuǎn)變類型，如block轉(zhuǎn)為塊標(biāo)簽，inline轉(zhuǎn)為內(nèi)聯(lián)標(biāo)簽；

幾個注意的規(guī)范：

p、dt、h標(biāo)簽里面不能嵌套塊屬性標(biāo)簽；

a標(biāo)簽不能嵌套a標(biāo)簽；

內(nèi)聯(lián)元素不能嵌套塊。

float

支持寬高；

不設(shè)置寬高時內(nèi)容撐開寬度；

同行顯示；

脫離文檔流（即飄在上面，會按照指定方向移動直到碰到父級邊界或另一個浮動元素才停止）；

提升層級半層（即會將其他塊的內(nèi)容擠到外面）：一個元素分為元素本身和元素內(nèi)容層，元素本身包括背景、寬高等，float設(shè)置后將提升層級半層，相當(dāng)于元素內(nèi)容被擠出來了。

clear屬性：設(shè)置元素某一方向不能有浮動元素，如果有，將自己退到下面。

清浮動

問題描述：子塊加了float，父塊無法包住子塊。

解決方法：

/*
方法一：
clear為父元素一個class
*/
.clear{zoom:1;}
.clear:after{content:"";display:block;clear:both;}
/*
方法二：
.father為父元素class
*/
.father{overflow:hidden;}

Ie6/7下的一些bug整理

ie6下最小高度問題：最小高度為19px，即使使用font-size=0也有最小高度2px。解決方法：overflow:hidden；

ie6雙邊距bug：同時使用float和margin-left/right，左右邊距會加倍。解決方法：使用display:inline或者直接使用內(nèi)嵌元素來解決（或者能使用margin的時候盡量使用padding替代margin）；

ie6/7下li間隙問題：解決方法：li之間有間隙。使用vertical-align來清理間隙。

定位

相對定位(relative)：

不影響元素本身特性；

不使元素脫離文檔流。

絕對定位(absolute):

使元素完全脫離文檔流；

默認(rèn)相對整個文檔定位；

使內(nèi)嵌元素支持寬高；

塊元素?fù)伍_寬高；

定位具有層級關(guān)系，后申明者層級越高，可使用z-index改變層級。

絕對定位一般配合相對定位使用，如果有定位父級則相對定位父級定位，沒有則相對整個文檔定位。

固定定位：跟絕對定位特性基本相同，但也有一些不同點：

固定定位始終相對整個文檔定位，而不會受父級定位元素影響；

IE6不支持固定定位

IE6下定位的一些bug：

relative：父級的overflow包不住子級的相對定位
解決方法：給父級也加定位元素；

absolute：ie6下定位元素的父級寬高都為奇數(shù)時，定位元素的right和bottom都有1px的偏差
解決方法：父級寬高盡量改為偶數(shù)。

可使用絕對定位或者固定定位清浮動，但一般不會特意使用此方法來清浮動，而是當(dāng)剛好使用到浮動元素時可減少清浮動步驟。

模擬固定定位的方法：（1）css中控制滾動條方式；（2）css表達(dá)式（不常用）；（3）使用js來控制。

圖片格式問題

半透明效果的圖片必須使用png；

IE6不支持png24圖片，解決方法有：

使用網(wǎng)上已有的js處理方法，由于除了IE6以外的其他瀏覽器不需要加載該js文件，使用IE注釋判斷語句來判斷：（不能處理body之上的png24）

使用css hack：使用特定瀏覽器才能解析的樣式。不推薦使用，一方面代碼復(fù)雜，另一方面維護性差。

使用png濾鏡：IE6下不支持圖片平鋪。

JS篇 一些基礎(chǔ)

IE6、7、8不支持js改變文本type，如xxx.type = “checkbox”，可考慮轉(zhuǎn)換思維來處理：隱藏某個type，再顯示另一個type;

不要對圖片相對路徑、color和innerHTML進行判斷，會有兼容問題；

IE和非IE對浮動控制有差別，IE下xxx.style.styleFloat = “l(fā)eft”，非IE下xxx.style.cssFloat = “l(fā)eft”。轉(zhuǎn)換思維處理：css定義class樣式為float:left，再在js里給元素加class；

Js中”.”可以替換成”[]”;

Class或者tagName等都是動態(tài)改變的，而Id是靜態(tài)改變的，具體看例子1.6-js順序問題.html；

Js中“==”比較的是倆元素值，而“===”先比較倆元素類型，再比較值；

NaN是一種不是數(shù)字的數(shù)字類型，typeof(NaN) => Number，出現(xiàn)NaN說明程序進行了非法的運算操作;

NaN是false，且NaN == NaN為false;

isNaN(x)，Number(x)為數(shù)字時返回false，Number(x)為NaN時返回true;

函數(shù)的默認(rèn)返回值是undefined;

js中xxx.style.width等獲取的是行間樣式，不能獲取到定義在上面的內(nèi)部樣式；

getComputedStyle可以獲取元素實際樣式，但IE6、7、8不支持；currentStyle在除IE外的瀏覽器中不兼容；

定時器：

重復(fù)執(zhí)行：setInterval(fn,time):設(shè)置定時器；clearInterval(timer):關(guān)閉定時器。
定時器如果是由事件控制的，要先關(guān)再開，避免多次觸發(fā)而混亂。

執(zhí)行一次：setTimeout(fn,time)；clearTimeout(timer)。

json的length為undefined；

數(shù)組的.length可以改變數(shù)組長度，但字符串的.length不能；

數(shù)組的幾個方法：push和unshift分別是往后和往前加元素，返回值都是最后數(shù)組長度（IE6/7不支持unshift的返回值），pop和shift分別是刪除最后和第一個元素，返回值是刪除的元素，splice可實現(xiàn)刪除、替換、添加：splice(a,b)：刪除數(shù)組中從第a位開始的b個元素，splice(a,b,c)：刪除數(shù)組中從第a位開始的b個元素，并用c替換（所以如果b為0，相當(dāng)于添加元素了）；

生成給定范圍的隨機數(shù)，如x~y:Math.round(Math.random() * (y - x) + x) ；

1~x隨機數(shù)，可使用取上整的方法：Math.ceil(Math.random() * x)；

字符串轉(zhuǎn)為數(shù)字：s – 0，數(shù)字轉(zhuǎn)為字符串：a + “”；

數(shù)字和字符串比較：將字符串轉(zhuǎn)為數(shù)字。字符串和非數(shù)字比較：非數(shù)字轉(zhuǎn)為字符串；

高階函數(shù)

map：arr.map(function(x){return xxxxx;});對數(shù)組中每個元素做處理，得到一個新的array；

reduce：arr.reduce(function(x,y){return xxxxxx;});對數(shù)組元素操作，x,y分別為上一次操作結(jié)果和數(shù)組中下一個元素，最后得到一個計算結(jié)果；

filter：arr.filter(function(x){return true/false;});如果返回false，刪除元素，最后得到一個新的array；

sort：arr.sort(function(x,y){return -1/0/1;});

Js解析過程

逐個域解析（一個包圍的就是一個域，函數(shù)內(nèi)部也是一個域）：找出所有var、function等參數(shù)定義，放在倉庫中（全局倉庫或局部倉庫）。遇到重名的會覆蓋，如果參數(shù)與函數(shù)重名了，函數(shù)會覆蓋參數(shù)。

逐行代碼解析：當(dāng)在函數(shù)中（局部倉庫）找不到某個參數(shù)時，會往上一層找。

性能問題