前端面試題(一)

時間 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