每日一刷（前端面试笔试题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]

posted on 2020-09-01 11:18 小名香菜~ 阅读(164) 评论(0) 收藏举报