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

12/6/2019 每日3+2

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

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

# 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
}
1
2
3
4
5
6
7
8

# 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对象
Last Updated: 2/24/2020, 9:02:17 AM
    asphyxia
    逆时针向