前端學習筆記（CSS、JS基礎篇）

CSS篇

• 注意：css註釋使用/ /，而不是<!-- -->或者//，不然很容易致使不明錯誤！！！

div

1. padding：內邊距。盒子內容與盒子邊框的距離設置，至關於給盒子加了厚度，使用此屬性後會改變盒子總體大小（通常會設置weight/height=原來weight/height-padding值；

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

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

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

  <div id=’father’><div id=’child’ style=’margin-top:10px’></div></div>

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

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

font

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

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

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

a標籤

1. 使用target屬性設置在原頁面仍是新開頁面打開連接；

2. <base target=」xxx」/>在head中全局定義連接打開方式；

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

4. 當a標籤的href是一個id時，稱爲錨點，點擊後將跳轉到對應id位置；

5. 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，說白了就是有利於被搜索到。

樣式優先級

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

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

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

css reset

1. 有些標籤有默認的樣式，如body默認有8px的外邊距，p默認有16px的外邊距，ol默認每項前面加數字等。因爲不一樣的瀏覽器可能會有不一樣的顯示效果，爲了作到瀏覽器兼容，首先要把默認樣式重置(css reset)，而後再加本身的樣式慢慢調試；

2. 不推薦使用*{xxx:none/0}來重置默認樣式，由於這樣會下降性能，通常使用複合樣式羅列各類標籤進行重置。

標籤分類

1. 內聯標籤(inline)：

• 默承認以與其餘內聯標籤同行顯示；

• 不支持width和height；

• 不支持margin和padding；

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

• 內容會撐開寬度。

1. 塊標籤(block)：

• 默認獨自佔一行顯示；

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

• 支持全部css命令。

1. inline-block標籤

• 支持寬高；

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

• 同行顯示；

• ie6/7不支持inline-block；

• img標籤爲inline-block標籤。

1. 可用display屬性轉變類型，如block轉爲塊標籤，inline轉爲內聯標籤；

2. 幾個注意的規範：

• p、dt、h標籤裏面不能嵌套塊屬性標籤；

• a標籤不能嵌套a標籤；

• 內聯元素不能嵌套塊。

float

1. 支持寬高；

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

3. 同行顯示；

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

5. 提高層級半層（即會將其餘塊的內容擠到外面）：一個元素分爲元素自己和元素內容層，元素自己包括背景、寬高等，float設置後將提高層級半層，至關於元素內容被擠出來了。

6. clear屬性：設置元素某一方向不能有浮動元素，若是有，將本身退到下面。

清浮動

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

• 解決方法：

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

Ie6/7下的一些bug整理

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

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

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

定位

1. 相對定位(relative)：

• 不影響元素自己特性；

• 不使元素脫離文檔流。

1. 絕對定位(absolute):

• 使元素徹底脫離文檔流；

• 默認相對整個文檔定位；

• 使內嵌元素支持寬高；

• 塊元素撐開寬高；

1. 定位具備層級關係，後申明者層級越高，可以使用z-index改變層級。

2. 絕對定位通常配合相對定位使用，若是有定位父級則相對定位父級定位，沒有則相對整個文檔定位。

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

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

• IE6不支持固定定位

1. IE6下定位的一些bug：

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

• absolute：ie6下定位元素的父級寬高都爲奇數時，定位元素的right和bottom都有1px的誤差
  解決方法：父級寬高儘可能改成偶數。

1. 可以使用絕對定位或者固定定位清浮動，但通常不會特地使用此方法來清浮動，而是當恰好使用到浮動元素時可減小清浮動步驟。

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

圖片格式問題

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

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

• 使用網上已有的js處理方法，因爲除了IE6之外的其餘瀏覽器不須要加載該js文件，使用IE註釋判斷語句來判斷：（不能處理body之上的png24）

  <!--[if IE 6]>
  xxx
  <![endif]-->

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

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

JS篇

一些基礎

1. IE六、七、8不支持js改變文本type，如xxx.type = 「checkbox」，可考慮轉換思惟來處理：隱藏某個type，再顯示另外一個type;

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

3. IE和非IE對浮動控制有差異，IE下xxx.style.styleFloat = 「left」，非IE下xxx.style.cssFloat = 「left」。轉換思惟處理：css定義class樣式爲float:left，再在js裏給元素加class；

4. Js中」.」能夠替換成」[]」;

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

6. Js中「==」比較的是倆元素值，而「===」先比較倆元素類型，再比較值；

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

8. NaN是false，且NaN == NaN爲false;

9. isNaN(x)，Number(x)爲數字時返回false，Number(x)爲NaN時返回true;

10. 函數的默認返回值是undefined;

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

12. getComputedStyle能夠獲取元素實際樣式，但IE六、七、8不支持；currentStyle在除IE外的瀏覽器中不兼容；

13. 定時器：

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

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

1. json的length爲undefined；

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

3. 數組的幾個方法：push和unshift分別是日後和往前加元素，返回值都是最後數組長度（IE6/7不支持unshift的返回值），pop和shift分別是刪除最後和第一個元素，返回值是刪除的元素，splice可實現刪除、替換、添加：splice(a,b)：刪除數組中從第a位開始的b個元素，splice(a,b,c)：刪除數組中從第a位開始的b個元素，並用c替換（因此若是b爲0，至關於添加元素了）；

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

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

6. 字符串轉爲數字：s – 0，數字轉爲字符串：a + 「」；

7. 數字和字符串比較：將字符串轉爲數字。字符串和非數字比較：非數字轉爲字符串；

高階函數

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

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

3. filter：arr.filter(function(x){return true/false;});若是返回false，刪除元素，最後獲得一個新的array；

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

Js解析過程

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

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

性能問題

1. <script>腳本文件下載和執行會形成阻塞，因此最好把<script>腳本文件引用等放在最後面，這樣纔不會影響到頁面的渲染；

2. 外聯腳本會由於HTTP請求形成必定的延時，因此要儘可能減小外聯腳本的個數，能夠合併的儘可能合併；

3. window對象的onload事件是在渲染頁面以後進行的，爲了無阻塞腳本，能夠嘗試讓腳本在onload事件觸發後再下載，有兩個可以異步加載和執行腳本的屬性：

• HTML4提出的defer，只有部分瀏覽器支持，帶有此屬性的腳本將在DOM加載完成後才下載執行；

• HTML5提出的async，在頁面加載的同時異步下載執行腳本，（下載完成後就會執行，因此執行順序不定，適合不相互依賴的腳本）。