准备杭州打拼了，在这里简单记录一下常问的面试题

zzj
121 阅读4分钟

css部分：

1. bfc（块级格式化上下文）

  • W3C解释：他决定了元素如何对其内容进行定位，以及与其他元素的关系和互相作用，当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定的规则进行布局。

  • 说人话：BFC的目的就是形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。

  • 常用的四种触发方式：

    (1)float不为none

    (2)position不为relative和static

    (3)overflow为auto、scroll和hidden

    (4)display的值为table-cell和inline-block

  • 解决了什么问题？怎么运用

    (1)解决浮动元素高度坍塌的问题。

      给父级设置overflow: hidden; 或者display: table-cell; 或者display: block; 或者position: fixed; 或者position: absolute;

    (2)解决自适应布局的问题。

      左边固定宽度，右边自适应：左边float: left;width: 200px;右边margin-left: 200px;

    (3)解决外边距垂直方向重合的问题。（兄弟元素之间的外边距在垂直方向上回取最大值而不是取和）

      为其中一个子元素的外面加一个父元素设置overflow: hidden;开启BFC，或者另一个设置padding；

2.opcity和rgba透明的区别

    rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。

3.圣杯布局和双飞翼布局

  • 圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。虽然两者的实现方法略有差异，不过都遵循了以下要点：

(1) 两侧宽度固定，中间宽度自适应

(2) 中间部分在DOM结构上优先，以便先行渲染

(3) 允许三列中的任意一列成为最高列

(4) 只需要使用一个额外的div标签

  • 圣杯布局常用实现方式(浮动方式以过时就不再赘述了)：

    (1)使用flex: dom结构：因为不用设置浮动了，container的三个子div按顺序排布就好。

    <body>
    <header>header</header>
    <div class="container">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>
    <footer>footer</footer>
</body>

    flex布局非常简单，只需在container中设置flex即可。

    .container{    
    display: flex;
    flex-direction: row;
}

    (2)使用grid:

    dom结构：

    <body>
    <header>header</header>
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    <footer>footer</footer>
</body>

    样式：

    body{
    display:grid;
}
.header{
    grid-row:1;
    grid-column:1/5;
    background-color: antiquewhite;
}
.footer{
    grid-row:3;
    grid-column:1/5;
    background-color: antiquewhite;
}
.left{
    grid-row:2;
    grid-column:1/2;
    background-color: burlywood;
}
.right{
    grid-row:2;
    grid-column:4/5;
    background-color: burlywood;
}
.middle{
    grid-row:2;
    grid-column:2/4;
    background-color: #b0f9c2;
}

    使用grid布局可以减少容器div；也比较容易理解；在2018年初绝大数浏览器已经支持css grid。

  • 双飞翼布局：

      双飞翼布局和圣杯布局几乎一样，区别在于处理middle中被遮挡的部分。双飞翼是在middle中再放一个div用来显示内容，为其设置margin。

    dom结构如下：

    <body>
    <header>header</header>
    <div class="container">
        <div class="middle">
            <div class="main">middle</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer>footer</footer>
</body>

    其他css和上一节第一个方法一样，区别在于这里middle中多了一个div main，用多了一个div的方式代替使用相对布局。

    .container{
    width:100%;
    height:200px;
}
.container>div{
    float: left;
    height:200px;
}
.left{
    width:200px;
    background-color: burlywood;
    margin-left: -100%;
}
.right{
    width:300px;
    background-color: burlywood;
    margin-left: -300px;
}
.middle{
    width:100%;
    background-color: #b0f9c2;
}
.main{
    margin:0 300px 0 200px;
}

js部分：

1.箭头函数this指向问题

对于箭头函数的this 用一句话概括：箭头函数中的this指向的是定义时的this，而不是执行时的this。
特别注意的是在定时器中普通函数的this是指向window，而箭头函数则是指向定义时的作用域。
传送门（简单易懂）：https://zhuanlan.zhihu.com/p/136732548

2.js垃圾回收机制

总结：js中的垃圾有哪些

全局变量：全局变量存在被使用的可能性，所以不能当做垃圾
局部变量：函数执行完了变量当做垃圾清除
单引用，双引用，环引用，这三种情况下，只有将所有指向该变量的对象清除才能够将该变量作为垃圾处理

垃圾回收算法有：标记清除、引用计数

将不用的数据直接赋值为null可以清除该数据

传送门（简单易懂）：zhuanlan.zhihu.com/p/353346756

3.innerhtml和innertext区别

简单来说：

innerHTML是把html代码和文字都取出来
innerText只把文字取出来

传送门（简单易懂）：blog.csdn.net/magi1201/ar…

4.取得介于 1 到 100 之间的一个随机数（random()方法）：

    Math.floor((Math.random()*100)+1);
avatar
文章
阅读
粉丝