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]
