[html]页面导入样式时，使用link和@import有什么区别？
1.加载资源的限制
link是XHTML的标签，除了加载CSS文件外，还可以加载RSS等其他事务，如加载模板等
@import只能加载CSS文件
2.加载方式
如果用link引用CSS，在页面载入时同时加载，即同步加载
如果用@import引用CSS，则需要等到网页完全加载后，再加载CSS文件，即异步加载
3.兼容性
link是XHTML的标签，无兼容问题
@import是CSS2.1中提出的，不支持低版本浏览器
4.改变样式
link的标签是DOM元素，支持使用javascript控制DOM和修改样式
@import是一种方法，不支持控制DOM和修改样式
圣杯布局、双飞翼布局是指页面从上到下由页头、内容和页脚组成，内容由左、中、右三列组成。
其中左右两列的宽度固定，中间一列自适应，并且要最先显示
区别就是在解决中间部分被挡住的问题时，采取的解决办法不一样
圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现。
<div id="hd">header</div>
<div id="bd">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
#hd{
height:50px;
background: #666;
text-align: center;
line-height: 50px;
}
#bd{
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;
position:relative;
left:-180px;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
position:relative;
right:-200px;
}
#footer{
height:50px;
background-color: #666;
text-align: center;
line-height: 50px;
}
双飞翼布局则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right
<div id="hd">header</div>
<div id="middle">
<div id="inside">middle</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="footer">footer</div>
#hd{
height:50px;
background: #666;
text-align: center;
}
#middle{
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;
}
#inside{
margin:0 200px 0 180px;
height:100px;
}
#footer{
clear:both;
height:50px;
background: #666;
text-align: center;
}
[js]用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值
var arr = new Array(5);
var num = randomNumber();
var i = 0;
randomArr(arr,num);
function randomArr(arr,num) {
if (arr.indexOf(num)< 0){
arr[i] = num;
i++;
} else {
num = randomNumber();
}
if (i>=arr.length){
console.log(arr);
return;
}else{
// 递归调用
randomArr(arr,num)
}
}
function randomNumber() {
// 返回一个大于2小于32的整数
return Math.floor(Math.random()*31 + 1)
}
题目来源：前端面试每日 3+1 —— 第1天（作者：浪子神剑）
网友评论