前端面试每日3+2(第5天)

当你发现自己的才华撑不起你的野心时，就请安静下来学习吧！

鲁迅说过：答案仅供参考...

1、对BFC的理解?

解析：

是什么？

BFC(block formatting context)直译为“块级格式化上下文”。是web页面的可视化css渲染的一部分。它是块级盒布局出现的区域，也是浮动元素进行交互的区域。它规定了内部块级元素（block-level box）如何布局。 w3c规范中，css2只有BFC（block formatting context）和IFC（inline formatting context），css3中增加了GFC和FFC。

BFC布局规则：

1. 内部box会在垂直方向，一个接一个的放置。
2. box垂直方向的距离由margin决定，属于同一个bfc的两个相邻的box的margin会发生重叠
3. 每个margin box的左边，与包含块border box的左边相接触（对于从左向右的格式化）。即使存在浮动也如此
4. BFC区域不会与float box重叠
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算。

怎么产生BFC?

1. 跟元素
2. float属性部位node
3. position为absolute或fixed
4. display为inline-block，table-cell，table-caption，flex，inline-flex
5. overflow不为visible

BFC的作用和（原理）

1. 自适应布局
2. 清除内部浮动
3. 防止垂直margin重叠

   Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
参考文章：深入理解BFC (opens new window)

2、CSS reset 是什么？normalize.css 是什么？

解析：

什么是？
HTML标签在浏览器中都有默认的样式，不同浏览器的默认样式之前存在差异。例如ul默认带有锁进样式，ie时候margin实现的，FireFox是padding实现的。开发时浏览器的默认样式会带来很多兼容性问题，影响开发效率。
解决方案就是一开始就将浏览器的默认样式去掉，覆盖掉浏览器的css默认属性。就是css reset。

3、css中浮动是怎么回事？清除浮动的方式？

解析：

• 原因：子盒子浮动脱离标准文档流 无法撑开父盒子。
• 负作用：1、父盒子背景无法显示 2、边框无法撑开 3、margin padding设置值无法正常显示
• 解决：
  • 父盒子设置固定合适的高度
  • clear:both
  • 父盒子div设置 overflow:hidden

4、new的实现原理。

解析：

1. 创建一个对象obj，
2. 将该对象的原型链__proto__指向构造函数的prototype
3. 在原型链上设置构造函数constructor为要实例化的Fn
4. call改变Fn的this的指向到obj，执行
5. 返回一个对象，如果Fn执行返回对象就返回该对象，否则返回obj

function New(Fn) {
    let obj = {}
    let arg = Array.prototype.slice.call(arguments, 1)
    obj.__proto__ = Fn.prototype
    obj.__proto__.constructor = Fn
    let ret = Fn.apply(obj, arg)
    return typeof ret === 'object' ? ret || obj : obj
}

5、commonjs模块化怎么导入导出，简单说下实现原理?

解析：

• https://www.cnblogs.com/chenshufang/p/9927543.html
• 模块化：将一个复杂的系统分割成多个模块
  • requireJs：AMD依赖前置
  • seaJs：CMD依赖就近
• nodejs使用的是Commjs规范
• 使用
  • moudle.exports导出
  • require导入
• require加载： 当node遇到 require(X),按照下面的顺序处理
  • X是内置模块
  • X是'./a'或者'../a'
  • X是一个目录：node_modules依次检索
  • not found
• module对象