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

CSS篇

注意：css注釋使用/ /，而不是或者//，否則很容易導致不明錯誤！！！

div

padding：內邊距。盒子內容與盒子邊框的距離設置，相當于給盒子加了厚度，使用此屬性后會改變盒子整體大小（一般會設置weight/height=原來weight/height-padding值；

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

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

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

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

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

font

font-size：文本字體，最好設置為偶數；

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

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

a標簽

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

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

當a標簽的href不是網址而是文件名（如xxx.doc等）時，點擊后將會下載對應的文件；

當a標簽的href是一個id時，稱為錨點，點擊后將跳轉到對應id位置；

4個偽類：

link:未訪問（默認，初始狀態）

hover:鼠標懸停（鼠標劃過）

active:鏈接激活（鼠標按下瞬間）

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

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

SEO

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

樣式優先級

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

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

同一優先級且層次數相同時，定義順序越后，優先級越高。

css reset

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

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

標簽分類

內聯標簽(inline)：

默認可以與其他內聯標簽同行顯示；

不支持width和height；

不支持margin和padding；

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

內容會撐開寬度。

塊標簽(block)：

默認獨自占一行顯示；

沒有寬度時，默認撐滿一行；

支持所有css命令。

inline-block標簽

支持寬高；

沒有寬高時內容撐開寬度；

同行顯示；

ie6/7不支持inline-block；

img標簽為inline-block標簽。

可用display屬性轉變類型，如block轉為塊標簽，inline轉為內聯標簽；

幾個注意的規范：

p、dt、h標簽里面不能嵌套塊屬性標簽；

a標簽不能嵌套a標簽；

內聯元素不能嵌套塊。

float

支持寬高；

不設置寬高時內容撐開寬度；

同行顯示；

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

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

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

清浮動

問題描述：子塊加了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或者直接使用內嵌元素來解決（或者能使用margin的時候盡量使用padding替代margin）；

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

定位

相對定位(relative)：

不影響元素本身特性；

不使元素脫離文檔流。

絕對定位(absolute):

使元素完全脫離文檔流；

默認相對整個文檔定位；

使內嵌元素支持寬高；

塊元素撐開寬高；

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

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

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

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

IE6不支持固定定位

IE6下定位的一些bug：

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

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

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

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

圖片格式問題

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

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

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

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

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

JS篇 一些基礎

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

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

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

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

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

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

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

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

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

函數的默認返回值是undefined;

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

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

定時器：

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

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

json的length為undefined；

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

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

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

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

字符串轉為數字：s – 0，數字轉為字符串：a + “”；

數字和字符串比較：將字符串轉為數字。字符串和非數字比較：非數字轉為字符串；

高階函數

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

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

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

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

Js解析過程

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

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

性能問題