每日一刷（面試題1）
Html：頁面匯入樣式時，使用link和@import有什麼區別？
本質上，這兩種方式都是為了載入CSS檔案，但還是存在著細微的差別
1.老祖宗的差別。link屬於XHTML標籤，而@import完全是CSS提供的一種方式。link標籤除了可以載入CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連線屬性等，@import就只能載入CSS了。
2.載入順序的差別。當一個頁面被載入的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被載入，而@import引用的CSS會等到頁面全部被下載完再被載入。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯.
3.相容性的差別。由於@import是CSS2.1提出的所以老的瀏覽器不支援，@import只有在IE5以上的才能識別，而link標籤無此問題。
4.使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，因為@import不是dom可以控制的。
Css：聖盃佈局和雙飛翼佈局的理解和區別，並用程式碼實現
作用:
聖盃佈局和雙飛翼佈局解決的問題都是一樣的, 就是兩邊定寬,中間自適應的三欄佈局.中間欄要放在文件流前面有線渲染.
區別:
聖盃佈局: 為了中間的內容不被遮擋,將中間的 div 設定了左右padding-left 和 padding-right 後,將左右兩個 div 用相對佈局position:relative並配合 left 和 right 屬性,以便左右兩欄 div 移動後不會遮擋住中間的 div。
雙飛翼佈局: 為了中間內容不被遮擋,直接在中間內部 div 建立子 div用於放置內容,在改 div 使用margin-left 和 margin-right為左右兩個 div 留出位置。
聖盃佈局：
/**聖盃佈局程式碼**/ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <div id="hd"> Header </div> <div id="bd"> <div id="middle"> middle </div> <div id="left"> left </div> <div id="right"> right </div> </div> </body> </html> <style type="text/css"> #hd { height: 50px; background: #666; text-align: center; } #bd { /*左右欄通過新增負的margin放到正確的位置了，此段程式碼是為了擺正中間欄的位置*/ padding: 0 200px 0 180px; height: 100px; } #middle { float: left; width: 100%; height: 100px; background: blue; } #left { float: left; width: 180px; height: 100px; margin-left: -100%; background: #0c9; /*中間欄的位置擺正之後，左欄的位置也相應右移，通過相對定位的left恢復到正確位置*/ position: relative; left: -180px; } #right { float: left; width: 200px; height: 100px; margin-left: -200px; background: #0c9; position: relative; right: -200px; } </style>
雙飛翼佈局：
/**雙飛翼佈局**/ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <div id="hd"> header </div> <div id="md"> <div id="inside"> middle </div> </div> <div id="left"> left </div> <div id="right"> right </div> <div id="footer"> </div> </body> </html> <style type="text/css"> #hd { height: 50px; background: #666; text-align: center; } #md { float: left; width: 100%; /*左欄上去到第一行*/ height: 100px; background: blue; } #left { float: left; width: 180px; height: 100px; margin-left: -100%; background: #0c9; } #right { float: left; width: 200px; height: 100px; margin-left: -200px; background: #0c9; } /*給內部div新增margin，把內容放到中間欄，其實整個背景還是100%*/ #inside { margin: 0 200px 0 180px; height: 100px; } #footer { clear: both; /*記得清楚浮動*/ height: 50px; background: #666; text-align: center; } </style>
Js：用遞迴演算法實現，陣列長度為5且元素的隨機數在2-32間不重複的值。
var arr = new Array(5); var rand,i = 0 function addNum(rand,i){ rand = parseInt(Math.random()*31+2,10); if(arr[4]!=undefined){ return arr; }else{ if(arr[0]-rand!=0&&arr[1]-rand!=0&&arr[2]-rand!=0&&arr[3]-rand!=0){ arr[i] = rand; i++; } return addNum(rand,i) } } addNum(rand,i); console.log(arr); //輸出如下 [30, 14, 20, 27, 4]