两道面试题

最新推荐文章于 2023-06-05 20:14:58 发布

南城旧时

最新推荐文章于 2023-06-05 20:14:58 发布

阅读量95

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_52006046/article/details/128057203

版权

call、apply、bind区别

相同:

都是改变this的指向的方法

区别:

1.调用方式;

call 和apply都是立即调用 ,bind不会立即调用函数

2.语法区别.

call参数是逗号分割,fn.call(thisArg也就是把this改成指向谁, 参数1，参数2，。。。。); apply是数组,fn.apply(thisArg也就是把this改成指向谁, [多个参数的位置])

3.返回值区别,

call 和apply返回值,就是普通函数的返回值; bind返回一个被修改过this指向的新函数

BFC

BFC（Block Formatting Context），BFC 的中文意思是块级格式化上下文,是用于布局块级盒子的独立渲染区域，一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。简单来说就是 BFC 就是 css 的一个布局概念，是一个独立的区域(容器)

满足下列条件之一就可以触发 BFC:

HTML 根元素
position 为 absolute 或 fixed
float 属性不为 none（常用）
overflow 不为 visible（常用）
display 为 inline-block， table-cell， table-caption， flex（常用)

可以解决什么问题:margin 重叠,清除浮动,自适应布局.

应用场景

1.防止 margin 重叠（塌陷）

<style>
  .wrap {
    overflow: hidden; // 新的BFC
  }
  p {
    color: #f55;
    background: #fcc;
    width: 200px;
    line-height: 100px;
    text-align: center;
    margin: 100px;
  }
</style>
<body>
  <p>Haha</p>
  <div class="wrap">
    <p>Hehe</p>
  </div>
</body>

2.清除内部浮动

<style>
  .par {
    border: 5px solid #fcc;
    width: 300px;
  }

  .child {
    border: 5px solid #f66;
    width: 100px;
    height: 100px;
    float: left;
  }
</style>
<body>
  <div class="par">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>