0222每日3+1

[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和修改样式

[css]圣杯布局和双飞翼布局的理解和区别，并用代码实现

圣杯布局、双飞翼布局是指页面从上到下由页头、内容和页脚组成，内容由左、中、右三列组成。

其中左右两列的宽度固定，中间一列自适应，并且要最先显示

区别就是在解决中间部分被挡住的问题时，采取的解决办法不一样

圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现。

header

 

middle

 

left

 

right

footer

#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

header

   

middle

left

right

footer

#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天（作者：浪子神剑）