前端面试题(一)

时间 2019-12-20

标签端面试题繁體版

原文原文链接

页面导入样式的时候, 使用 link 和 @import 有什么区别

区别: 

1. link 是 XHTML 标签, 除了加载 css 外, 还能够定义 RSS 等其余事务, @import 是 css 范畴, 只能加载 css.
2. link 引用 css 的时候,与页面是同步加载的, 而 @import 须要页面彻底加载以后才加载, 会出现一开始没有样式 闪烁一下以后才显示出来的现象
3. link 是 XHTML, 没有兼容问题, 而 @import 是 css2.1 以后提出来的, 低版本的浏览器不支持 @import
4. link 支持经过 JavaScript 能控制 DOM 改变样式, @import 不支持

圣杯布局和双飞翼布局的理解和区别, 并用代码表示出来

做用: 这两个布局的做用都是同样的, 就是实现一个两边定宽, 中间自适应的三栏布局.
区别: 
    *圣杯布局*
        为了中间的 div 内容不被遮挡, 将中间的 div 设置 padding-left 和 padding-right 以后, 再将左右两个 div 经过 position:relative 配合 right 和 left 定位定在左右两边.
    *双飞翼布局*
        为了中间的 div 内容不被遮挡, 将中间的 div 建立一个子 div 用于放置内容, 而后在该子 div 中经过 margin-left 和 margin-right 将左右两边空出来.

圣杯布局代码:css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</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>
    <div id="fd">Footer</div>
</body>
</html>
<style>
    #hd{
        height: 50px;
        background-color: aqua;
        text-align: center;
    }
    #bd{
        height: 100px;
        padding: 0 200px 0 180px;
    }
    #fd{
        height: 50px;
        background-color: burlywood;
        text-align: center;
    }
    #left{
        float: left;
        width: 180px;
        height: 100px;
        background-color: chartreuse;
        margin-left:-100%;
        /*
            这里的 margin-left:-100% 可能会有人问为何.这里作一下解释:
            margin负值会改变元素占据的空间，你要是不给他负值，必定是在第二行显示，由于他占据空间，第一行没有地方放他，你要是给一个-180px，和他宽度同样，那他占据的空间就是0，天然就回跑到上面去，跟着middel那个div，你在给大一点负值，你能够理解为给了一个margin-right，由于收缩到0以后，再给负值，又会在元素右边有一个负的margin值，就至关于给了一个margin-right 天然是向左移动。
            100%就是bd的宽度，bd比left宽，所以left至关于不占空间，理论上能够放在和bd一行而不是另起一行，而后按规则就放上去了。
            主要要理解 margin-left 是依据当前盒子的左边框距离外部盒子的右边框的距离就容易理解一些了. 因此right 盒子设置 margin-left 一个本身的宽度就能够紧贴 box 的右边框.这里 box 的边框由于 padding 的缘故在距离 body 的右边框 200px 的距离
        */
        position: relative;
        left: -180px;
    }
    #middle{
        float: left;
        width: 100%;
        height: 100px;
        background-color: chocolate;
    }
    #right{
        float: left;
        width: 200px;
        height: 100px;
        background-color: darkblue;
        margin-left: -200px;
        position: relative;
        right: -200px;
    }
</style>

双飞翼布局:html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="hd">Header</div>
    <div id="md">
        <div id="sonMiddle">middle</div>
    </div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="fd">Footer</div>
</body>
</html>
<style>
    #hd{
        height: 50px;
        background-color: darkcyan;
        text-align: center;
    }
    #fd{
        clear: both;
        height: 50px;
        background-color:deepskyblue;
        text-align: center;
    }
    #md{
        height: 100px;
        width: 100%;
        background-color: darkgreen;
        float: left;
    }
    #left{
        width: 180px;
        height: 100px;
        background-color: darkmagenta;
        float: left;
        margin-left: -100%;
    }
    #right{
        width: 200px;
        height: 100px;
        background-color: darkred;
        float: left;
        margin-left: -200px;
    }
    #sonMiddle{
        margin: 0 200px 0 180px;
        height: 100px;
    }
</style>

用递归算法实现,一个数组长度为 5 且元素的随机数在 2-32 之间的不重复值

先说一下看到这道题的思路:git

生成一个长度为 5 的数组 arr

生成一个在 2-32 的随机数 randomNumber

把随机数 randomNumber 插入到数组 arr 中, 若是数组内已经有这个随机数,则从新生成随机数,继续插入判断,若是没有且数组长度小于 5,则插入,当数组长度达到 5 的时候返回该数组

var arr = new Array(5);
    var num = randomNumber();
    function randomNumber(){
        return Math.floor(Math.random()*30+2);
    }
    var i = 0;
    randomArr(arr,num);
    function randomArr(arr,num){
        if(arr.indexOf(num)<0){
            arr[i]=num;
            i++
        }else{
            num = randomNumber()
        }
        if(arr.length>=5){
            console.log(arr)
            return;
        }else{
            randomArr(arr,num)
        }
    }

面试题摘自 Github
但愿你们能够本身思考一下, 敲一敲代码. 感谢阅读~~github

前端面试题(一)

页面导入样式的时候, 使用 link 和 @import 有什么区别

圣杯布局和双飞翼布局的理解和区别, 并用代码表示出来

用递归算法实现,一个数组长度为 5 且元素的随机数在 2-32 之间的不重复值