注意:css註釋使用/ /,而不是<!-- -->或者//,不然很容易致使不明錯誤!!!css
padding:內邊距。盒子內容與盒子邊框的距離設置,至關於給盒子加了厚度,使用此屬性後會改變盒子總體大小(通常會設置weight/height=原來weight/height-padding值;html
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-size:文本字體,最好設置爲偶數;async
text-indent:首行空格,使用em或px單位,通常使用em,表示首行縮進多少個字;函數
line-height:行高,他的值=font-size+文字上下間距,即文字會在一個line-height高度的框中居中。性能
使用target屬性設置在原頁面仍是新開頁面打開連接;
<base target=」xxx」/>在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:搜索引擎優化。搜索引擎中有一個爬蟲模塊,在頁面中使用諸如h1/h2/h3/strong/em等強調式的標籤,有利於seo,說白了就是有利於被搜索到。
類型 < class < id < 行間樣式 < js;
同一優先級時,定義的層次越多,優先級越高,如 div p{xxx} > p{xxx};
同一優先級且層次數相同時,定義順序越後,優先級越高。
有些標籤有默認的樣式,如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設置後將提高層級半層,至關於元素內容被擠出來了。
clear屬性:設置元素某一方向不能有浮動元素,若是有,將本身退到下面。
問題描述:子塊加了float,父塊沒法包住子塊。
解決方法:
/* 方法一: clear爲父元素一個class */ .clear{zoom:1;} .clear:after{content:"";display:block;clear:both;} /* 方法二: .father爲父元素class */ .father{overflow:hidden;}
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)
<!--[if IE 6]> xxx <![endif]-->
使用css hack:使用特定瀏覽器才能解析的樣式。不推薦使用,一方面代碼複雜,另外一方面維護性差。
使用png濾鏡:IE6下不支持圖片平鋪。
IE六、七、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能夠獲取元素實際樣式,但IE六、七、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;});
逐個域解析(一個<script></script>包圍的就是一個域,函數內部也是一個域):找出全部var、function等參數定義,放在倉庫中(全局倉庫或局部倉庫)。遇到重名的會覆蓋,若是參數與函數重名了,函數會覆蓋參數。
逐行代碼解析:當在函數中(局部倉庫)找不到某個參數時,會往上一層找。
<script>腳本文件下載和執行會形成阻塞,因此最好把<script>腳本文件引用等放在最後面,這樣纔不會影響到頁面的渲染;
外聯腳本會由於HTTP請求形成必定的延時,因此要儘可能減小外聯腳本的個數,能夠合併的儘可能合併;
window對象的onload事件是在渲染頁面以後進行的,爲了無阻塞腳本,能夠嘗試讓腳本在onload事件觸發後再下載,有兩個可以異步加載和執行腳本的屬性:
HTML4提出的defer,只有部分瀏覽器支持,帶有此屬性的腳本將在DOM加載完成後才下載執行;
HTML5提出的async,在頁面加載的同時異步下載執行腳本,(下載完成後就會執行,因此執行順序不定,適合不相互依賴的腳本)。