前端面试知识点整理（一）

面试准备

一、技术栈准备

jQuery　　源码（核心架构、事件委托、插件机制）—— 看相关的博客文章

Vue React Angular

node.js

前端工程方面 ( sass/less gulp grunt webpack npm browserify )

二、自我介绍准备

简历

基本信息，学历
工作经历，时间-公司-岗位-职责-技术栈-业绩
开源项目

自我陈述

把握面试的沟通方向
豁达、自信的适度发挥

一面 / 二面

页面布局
CSS盒模型
DOM事件
HTTP协议
面向对象
原型链
通信
安全
算法

一、页面布局

浮动
绝对定位
flex-box
display: table-cell
grid布局

基本

<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout article div{
        min-height: 100px;
    }
</style>

1. 浮动方案

<section class="layout float">

    <style media="screen">
        .layout.float .left{
            float: left;
            width: 300px;
            background-color: red;
        }
        .layout.float .right{
            float: right;
            width: 300px;
            background-color: blue;
        }
        .layout.float .center{
            background-color: yellow;
        }
    </style>
    
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h1>浮动解决方案</h1>
            中间部分自适应
        </div>
    </article>
</section>

2. 绝对定位

<section class="layout absolute">

    <style media="screen">
        .layout.absolute .left-center-right > div{
            position: absolute;
        }
        .layout.absolute .left{
            left: 0;
            width: 300px;
            background-color: red;
        }
        .layout.absolute .center{
            left: 300px;
            right: 300px;
            background-color: yellow;
        }
        .layout.absolute .right{
            right: 0;
            width:300px;
            background-color: blue;
        }
    </style>
    
    <article class="left-center-right">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h1>绝对定位解决方案</h1>
            中间部分自适应
        </div>
    </article>
</section>

3. flex-box

<section class="layout flexbox">

    <style media="screen">
        .layout.flexbox .left-center-right{
            display: flex;
        }
        .layout.flexbox .left{
            width: 300px;
            background-color: red;
        }
        .layout.flexbox .center{
            flex: 1;
            background-color: yellow;
        }
        .layout.flexbox .right{
            width: 300px;
            background-color: blue;
        }
    </style>
    
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h1>flexbox解决方案</h1>
            中间部分自适应
        </div>
        <div class="right"></div>
    </article>
</section>

4. 表格布局

<section class="layout table">

    <style media="screen">
        .layout.table .left-center-right{
            width: 100%;
            display: table;
            height: 100px;
        }
        .layout.table .left-center-right > div{
            display: table-cell;
        }
        .layout.table .left{
            width: 300px;
            background-color: red;
        }
        .layout.table .center{
            background-color: yellow;
        }
        .layout.table .right{
            width: 300px;
            background-color: blue;
        }
    </style>
    
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h1>表格布局解决方案</h1>
            中间部分自适应
        </div>
        <div class="right"></div>
    </article>
</section>

5.网格布局

<section class="layout grid">

    <style media="screen">
       .layout.grid .left-center-right{
           display: grid;
           width: 100%;
           grid-template-rows: 100px;
           grid-template-columns: 300px auto 300px;
       }
       .layout.grid .left{
           background-color: red;
       }
       .layout.grid .center{
           background-color: yellow;
       }
       .layout.grid .right{
           background-color: blue;
       }
    </style>
    
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h1>网格布局解决方案</h1>
            中间部分自适应
        </div>
        <div class="right"></div>
    </article>
</section>

拓展：

每个解决方案的优缺点？

浮动：

脱离了文档流，容易带来问题
兼容性好

绝对定位

快捷
脱离文档流，下面子元素也要脱离

flex

好用，解决上述问题
PC IE8不支持

表格

代码简单，兼容性好
单元格会同时增高

网格

新技术
老版本兼容问题

假设去掉高度，考虑纵向，那个方案适用？

flex 和 表格布局 会自动撑开，其他会超出不适用。

上下宽度固定，中间自适应

基本

<style>
    html * {
        margin: 0;
        padding: 0;
    }
    .top-center-bottom > div{
        width: 100%;
    }
    
    html,body{
        height: 100%;
    }
</style>

1.浮动方法

<style media="screen">
    div{
        box-sizing: border-box;
    }
    .layout{
        height: 100%;
    }
    .top-center-bottom{
        height: 100%;
    }
    .top{
        float: left;
        height: 100px;
        background-color: red;
    }
    .center{
        height: 100%;
        padding-top: 100px;
        padding-bottom: 100px;
        background-color: yellow;
    }
    .bottom{
        float: left;
        margin-top: -100px;
        height: 100px;
        background-color: blue;
    }
</style>

<div class="layout">
    <div class="top-center-bottom">
        <div class="top"></div>
        <div class="center">
            <p>中间为自适应</p>
            <p>中间为自适应</p>
            <p>中间为自适应</p>
        </div>
        <div class="bottom"></div>
    </div>
</div>

2. 绝对定位方法

<div class="layout">
    <div class="top-center-bottom">
        <style media="screen">
            .top-center-bottom > div{
                position: absolute;
            }
            .top{
                height: 100px;
                background-color: red;
                top: 0;
            }
            .center{
                top: 100px;
                bottom:100px;
                background-color: yellow;
            }
            .bottom{
                bottom: 0;
                height: 100px;
                background-color: blue;
            }
        </style>

        <div class="top"></div>
        <div class="center">
            <p>中间为自适应</p>
            <p>中间为自适应</p>
            <p>中间为自适应</p>
            <p>中间为自适应</p>
        </div>
        <div class="bottom"></div>
    </div>
</div>

3. flex布局

<style media="screen">
    .layout{
        height: 100%;
    }
    .top-center-bottom{
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .top{
        height: 100px;
        background-color: red;
    }
    .center{
        flex: 1;
        background-color: yellow;
    }
    .bottom{
        height: 100px;
        background-color: blue;
    }

</style>

<div class="layout">
    <div class="top-center-bottom">
        <div class="top"></div>
        <div class="center">
            <p>中间为自适应</p>
            <p>中间为自适应</p>
            <p>中间为自适应</p>
        </div>
        <div class="bottom"></div>
    </div>
</div>

4. table布局

<style media="screen">
    .layout{
        height: 100%;
    }
    .top-center-bottom{
        width: 100%;
        height: 100%;
        display: table;
    }
    .top-center-bottom > div{
        display: table-row;
        vertical-align: middle;
    }
    .top{
        height: 100px;
        background-color: red;
    }
    .center{
        background-color: yellow;
    }
    .bottom{
        height: 100px;
        background-color: blue;
    }
</style>

<div class="layout">
    <div class="top-center-bottom">
        <div class="top"></div>
        <div class="center">
            <p>中间为自适应</p>
            <p>中间为自适应</p>
            <p>中间为自适应</p>
        </div>
        <div class="bottom"></div>
    </div>
</div>

5. 网格布局

<style media="screen">
    .layout{
        height: 100%;
    }
    .top-center-bottom{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: 100px auto 100px;
        grid-template-columns: 100%;
    }
    .top{
        background-color: red;
    }
    .center{
        background-color: yellow;
    }
    .bottom{
        background-color: blue;
    }
</style>

<div class="layout">
    <div class="top-center-bottom">
        <div class="top"></div>
        <div class="center">
            <p>中间为自适应</p>
            <p>中间为自适应</p>
            <p>中间为自适应</p>
        </div>
        <div class="bottom"></div>
    </div>
</div>

两栏布局同理，更简单。

二、CSS 盒模型

谈谈你对CSS盒模型的认识
基本概念：标准模型+IE模型、区别
CSS如何设置这两种模型
JS如何设置获取合模型对应的宽高
根据盒模型解释边距重叠
BFC（边距重叠解决方案）

CSS盒模型

标准模型 的宽度就是content宽度，不含padding, border

IE模型 宽度计算包含 padding, border

box-sizing: content-box

box-sizing: border-box

dom.style.width / height —— 只能取内联样式的宽高（style标签内和外联的无法取到）

dom.currentStyle.width / height —— 浏览器最终渲染以后的宽高（只支持IE）

window.getComputedStyle( dom ).width / height —— 浏览器最终渲染以后的宽高（firefox, chrome）

兼容写法：

function getStyle( obj, attr) {
    if( obj.currentStyle ) {
        return obj.currentStyle[attr];
    }
    else{
        return getComputedStyle( obj, true )[attr];
}

dom.getBoundingClientRect().width / height —— 计算一个元素的绝对位置

边距重叠

<section id="sec">
    <style media="screen">
        #sec{
            background-color: red;
            overflow: hidden; 
        }
        .child{
            height: 100px;
            background-color: yellow;
            margin-top: 10px;
        }
    </style>
    <article class="child"></article>
</section>

为什么加了 overflow: hidden; 高度就变成110px 了？

答：创建了BFC，块级格式化上下文

BFC原理：

BFC元素垂直方向发生重叠
BFC元素浮动的BOX重叠
BFC是独立容器，内外元素不会影响
BFC高度计算时，浮动元素也参与计算

创建BFC：

float 值不为 none;
position 值不为 static 或 relative
display 值为table
overflow 值为 auto 或 hidden

BFC 使用场景：

BFC垂直方向边距重叠与消除重叠

<!-- BFC垂直方向边距重叠 与 消除重叠-->
<section id="margin">
    <style>
        #margin{
            background-color: pink;
            overflow: hidden;
        }
        #margin p{
            margin: 10px auto 25px;
            background-color: red;
        }
    </style>
    <p>1</p>

    <div style="overflow:hidden;">
        <p>2</p>
    </div>
    <p>3</p>
</section>

BFC 消除float 重叠

<!-- BFC不与float 重叠 -->
<section id="layout">
    <style>
        #layout{
            background-color: red;
        }
        #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        #layout .right{
            height: 110px;
            background-color: #ccc;
            /* 重点 */
            overflow: auto; 
        }
    </style>
    
    <div class="left"></div>
    <div class="right"></div>
</section>

BFC 清除浮动

<!-- BFC清除浮动 -->
<section id="float">
    <style>
        #float{
            background-color: red;
            /* overflow: hidden; */
            /* float: left; */
            overflow: auto;
        }
        #float .float{
            float: left;
            font-size: 30px;
        }
    </style>
    <div class="float">我是浮动元素</div>
</section>

总结：BFC元素在计算高度的时候，会考虑内部元素 float ，子元素float 也不影响父元素的高度计算。