前端面試

一、HTML

    1、H5 新特性有哪些

        十大新特性

二、CSS

    1、實現左側 div 固定寬度,右側 div 自適應寬度的方法有哪些

        a、flex 彈性盒模型
        b、float 浮動其中一個配合margin;2個都浮動且配合margin
        c、百分比流式佈局
        d、diaplay: table;
        e、一個設置 margin,另一個設置 absolute

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>css實現右側固定寬度,左側寬度自適應</title>
    <style type="text/css">
        .wrap {
            max-width: 900px;
            margin:0 auto 10px;
            border: 1px solid green;
            overflow: hidden;
        }
        .content ,.sidebar {
            background-color: #eee;
        }
        .sidebar {
            float: right; 
            width: 300px;
            background-color: gold;
        }
        .content {
            margin-right: 310px;
            background-color: #eee;
        }
        .sidebar2 {
            float: left;
            width: 300px;
            background-color: gold;
        }
        .content2 {
            margin-left: 310px;
            background-color: #eee;
        }  
        .wrap2 {
            max-width: 900px;
            margin:0 auto 10px;
            border: 1px solid green;            
            position: relative;
        }
        .content3 {
            margin-right: 310px;
            background-color: #eee;
        }
        .sidebar3 {
            position: absolute;
            right: 0;
            top: 0;
            width: 300px;
            background-color: gold;
        }
        .content4 {
            margin-left: 310px;
            background-color: #eee;
        }
        .sidebar4 {
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            background-color: gold;
        }    
        .content5 {
            float: left;
            width: 100%;
            margin-left: -310px;
            background-color: #eee;
        }
        .content5s {
            margin-left: 310px;
        }        
        .sidebar5 {
            float: right;
            width: 300px;
            background-color: gold;
        }    
        .content6 {
            float: right;
            width: 100%;
            margin-right: -310px;
            background-color: #eee;
        }
        .content6s {
            margin-right: 310px;
        }        
        .sidebar6 {
            float: left;
            width: 300px;
            background-color: gold;
        }  
        .wrap3 {
            display: table;
            max-width: 900px;
            width: 100%;
            margin:0 auto 10px;
            border: 1px solid green;            
        } 
        .content7 {
            display: table-cell;
            background-color: #eee;
        }
        .sidebar7 {
            display: table-cell;
            width: 300px;
            background-color: gold;
        }                           
    </style>
</head>  
<body>
    <div class="wrap">
        <div class="sidebar">固定寬度區(float)</div>
        <div class="content">自適應區,瀏覽器寬度縮小時文字會自動換行。</div>
    </div>
    <div class="wrap">
        <div class="sidebar2">固定寬度區(float)</div>
        <div class="content2">自適應區,瀏覽器寬度縮小時文字會自動換行。</div>
    </div>
    <div class="wrap2">
        <div class="content3">自適應區,瀏覽器寬度縮小時文字會自動換行。</div>
        <div class="sidebar3">固定寬度區(absolute)</div>
    </div>  
    <div class="wrap2">
        <div class="content4">自適應區,瀏覽器寬度縮小時文字會自動換行。</div>
        <div class="sidebar4">固定寬度區(absolute)</div>
    </div>  
    <div class="wrap">
        <div class="content5">
            <div class="content5s">自適應區,瀏覽器寬度縮小時文字會自動換行。</div>
        </div>
        <div class="sidebar5">固定寬度區(float與margin齊上陣)</div>
    </div>  
    <div class="wrap">
        <div class="content6">
            <div class="content6s">自適應區,瀏覽器寬度縮小時文字會自動換行。</div>
        </div>
        <div class="sidebar6">固定寬度區(float與margin齊上陣)</div>
    </div> 
    <div class="wrap3">
        <div class="content7">自適應區,瀏覽器寬度縮小時文字會自動換行。</div>
        <div class="sidebar7">固定寬度區(display:table)</div>
    </div>   
    <div class="wrap3">
        <div class="sidebar7">固定寬度區(display:table)</div>
        <div class="content7">自適應區,瀏覽器寬度縮小時文字會自動換行。</div>
    </div>                
</body>  
</html>  

    2、CSS hack

        不考慮IE的Q類型,而只考慮S(標準)類型的情況下:
        * 和 + 和 # 效果等同,都兼容 6,7
        -(減號)和 _(下劃線)效果等同,只兼容 6
        \9 兼容 6,7,8,9,10
        \0 兼容 8,9,10,11
        \9\0 兼容 9,10

三、JS

    1、js 運行機制

        運行機制
        包括:單線程概念、異步、任務隊列、event loop 事件循環
        JS 演變、單線程、異步任務
        包括:JS 介紹與演變、JS 單線程、JS引擎線程中工作原理、異步任務執行機制、異步編程

    2、數據類型、判斷方法、堆和棧、深淺拷貝

        數據類型。包括:基本類型、引用類型以及對他們的講解
        判斷數據類型的四種方法。包括:typeof、instanceof、constructor、toString
        js中的堆與棧 、淺拷貝與深拷貝

    3、異步操作的幾種方法、有什麼區別和優缺點

        js處理異步的幾種方式
        包括:回調函數、事件監聽、發佈/訂閱、promise、async await

    4、js 取一個數組的最大值

        js獲取數組中最大和最小值
        包括:排序法、假設法、使用 Math 中的 max/min 方法、使用ES6的擴展運算符
        另外:

    5、const 和 let, const 在什麼情況下使用、賦值會有什麼效果

        阮一峯 ES6 入門 -- let 和 const

    6、typescript 語言

    7、數組的增刪操作

        

    8、遍歷數組的方法及差別
        

        js中數組遍歷的幾種方法及其區別

    9、計算機語言分類

        計算機語言種類
        包括:動態類型和靜態類型、函數式編程語言、命令式程序設計語言、面嚮對象語言、過程式語言、解釋性語言、腳本語言、編程型語言、另一種分類方式
        常見的幾種分類
        包括:高級語言和低級語言、  類型和靜態類型、強制類型和弱類型、編譯型,解釋型,半編譯半解釋、面向對象型和麪向過程型
        百度百科計算機語言分類

    10、生成隨機數

        js生成隨機數
        菜鳥教程 -- 隨機數

    11、內存分配和垃圾回收

        js內存管理和垃圾回收

四、Vue

    1、Vue 的基本相關問題

        Vue面試問題
        包括:對於 MVVM 的理解,Vue 的生命週期,Vue實現數據雙向綁定的原理,Vue組件間的參數傳遞,Vue的路由實現,Vue與Angular以及React的區別,Vue路由的鉤子函數,Vuex是什麼、怎麼使用、什麼場景下使用,Vue-cli如何新增自定義指令,Vue如何自定義一個過濾器,對keep-alive 的瞭解,其他問題。

五、react

    1、react 的 redux

    2、react 的 setState 爲什麼是異步

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章