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

CSS篇

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

div

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

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

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

父子級(jí)包含時(shí)子級(jí)的margin會(huì)傳遞給父級(jí)，如：

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

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

font

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

text-indent：首行空格，使用em或px單位，一般使用em，表示首行縮進(jìn)多少個(gè)字；

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

a標(biāo)簽

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

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

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

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

4個(gè)偽類：

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

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

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

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

一般使用順序?yàn)椋簂ink、visited、hover、active。記憶方法：love hate。
其他標(biāo)簽也有這4個(gè)偽類，但ie6只支持a標(biāo)簽的這4個(gè)偽類。

SEO

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

樣式優(yōu)先級(jí)

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

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

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

css reset

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

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

標(biāo)簽分類

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

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

不支持width和height；

不支持margin和padding；

代碼換行將會(huì)顯示一個(gè)空格（空格大小=字體大小/2）；

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

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

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

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

支持所有css命令。

inline-block標(biāo)簽

支持寬高；

沒有寬高時(shí)內(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)簽；

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

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

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

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

float

支持寬高；

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

同行顯示；

脫離文檔流（即飄在上面，會(huì)按照指定方向移動(dòng)直到碰到父級(jí)邊界或另一個(gè)浮動(dòng)元素才停止）；

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

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

清浮動(dòng)

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

解決方法：

/*
方法一：
clear為父元素一個(gè)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：同時(shí)使用float和margin-left/right，左右邊距會(huì)加倍。解決方法：使用display:inline或者直接使用內(nèi)嵌元素來解決（或者能使用margin的時(shí)候盡量使用padding替代margin）；

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

定位

相對(duì)定位(relative)：

不影響元素本身特性；

不使元素脫離文檔流。

絕對(duì)定位(absolute):

使元素完全脫離文檔流；

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

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

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

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

絕對(duì)定位一般配合相對(duì)定位使用，如果有定位父級(jí)則相對(duì)定位父級(jí)定位，沒有則相對(duì)整個(gè)文檔定位。

固定定位：跟絕對(duì)定位特性基本相同，但也有一些不同點(diǎn)：

固定定位始終相對(duì)整個(gè)文檔定位，而不會(huì)受父級(jí)定位元素影響；

IE6不支持固定定位

IE6下定位的一些bug：

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

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

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

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

圖片格式問題

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

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

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

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

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

JS篇 一些基礎(chǔ)

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

不要對(duì)圖片相對(duì)路徑、color和innerHTML進(jìn)行判斷，會(huì)有兼容問題；

IE和非IE對(duì)浮動(dòng)控制有差別，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等都是動(dòng)態(tài)改變的，而Id是靜態(tài)改變的，具體看例子1.6-js順序問題.html；

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

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

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

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

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

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

getComputedStyle可以獲取元素實(shí)際樣式，但I(xiàn)E6、7、8不支持；currentStyle在除IE外的瀏覽器中不兼容；

定時(shí)器：

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

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

json的length為undefined；

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

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

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

1~x隨機(jī)數(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;});對(duì)數(shù)組中每個(gè)元素做處理，得到一個(gè)新的array；

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

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

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

Js解析過程

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

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

性能問題