前端面试题(一)

页面导入样式的时候, 使用 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 将左右两边空出来.

圣杯布局代码:

<!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>

双飞翼布局:

<!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 之间的不重复值

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

生成一个长度为 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
希望大家可以自己思考一下, 敲一敲代码. 感谢阅读~~

前端面试题(一)

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

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

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

Evil

引用和评论

前端面试题Vue篇(一)

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了