一、BFC
什么是BFC？
什么是BFC机制呢？BFC全称 Block Formatting Context （块级格式上下文）
官方解释：是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
简单的来说呢BFC是一个完全独立的空间也就是布局环境，让这个环境里面的子元素不会影响到这个独立空间之外的布局。
BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列 BFC就是页面中的一个独立容器，容器里的标签不会影响到外部标签 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠 计算BFC的高度时，浮动元素也参与计算
怎么触发BFC？
以下的CSS属性都可以触发BFC
- overflow: hidden
- display: inline-block
- position: absolute
- position: fixed
- display: table-cell
- display: flex
BFC可以解决那些问题呢？
- 脱离文档流，高度塌陷问题
- Margin边距重叠
- 两栏布局 通常，我们会为定位和清除浮动创建新的 BFC，而不是更改布局因为它将： 包含内部浮动 排除外部浮动 阻止 外边距重叠
详情参考大佬：juejin.cn/post/695008… 官方文档：developer.mozilla.org/zh-CN/docs/…
二、offsetLeft/offsetTop和style.left/style.top区别?
-
offsetLeft和offsetTop 两个都是只读属性。
-
offsetLeft就是以父元素作为参照点，当前元素相对于父元素左边的偏移量。
-
offsetTop就是以父元素为参照物，当前元素相对于父元素上边的偏移量如果没有父元素那么参照点就是body
-
offsetLeft/offsetTop和style.left/style.top的功能一样，区别在于返回值不同，可读写不同。
-
返回值不一样：style.left/style.top返回的是字符串，带了单位（px）的，而offsetLeft/offsetTop只返回数字（小数会四舍五入）。
-
可读写性不同：offsetLeft/offsetTop只读，而style.left/style.top 可读写。
-
若是没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串而且必须要定义在html里，如果定义在css里，style.left的值仍然为空）。
详情参考大佬：juejin.cn/post/684490…
三、let const与var 的区别
从以下几点来了解let const var 的区别
-
块级作用域：块级作用域是{}包裹起来的,let 和 const 具有块级作用域，var不存在块级作用域。（块级作用域可以解决内层变量可能把外层变量覆盖掉的问题；用来计数的循环变量泄露吧变成了全局变量）
-
变量提升： var存在变量提升，let和const不存在变量提升（即在变量只能在声明之后使用，否在会报错。）
-
给全局添加属性： 浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let和const不会。
-
重复声明： var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的遍历。const和let不允许重复声明变量。
-
暂时性死区： 在使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。使用var声明的变量不存在暂时性死区。
-
初始值设置： 在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。
-
指针指向： let和const都是ES6新增的用创建变量的语法。 let创建的变量是可以更改指针指向（可以重新赋值）。但const声明的变量是不允许改变指针的指向。
详情参考大佬：blog.csdn.net/xiaoqingron…
