前端學習筆記(CSS、JS基礎篇)

CSS篇

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

div

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

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

  • 外邊距會疊壓。例如設置了上面的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);dom

  • auto屬性設置後,拉伸縮小瀏覽器後,div位置保持不變;異步

font

  1. font-size:文本字體,最好設置爲偶數;async

  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,在頁面加載的同時異步下載執行腳本,(下載完成後就會執行,因此執行順序不定,適合不相互依賴的腳本)。

相關文章
相關標籤/搜索