【每日十分钟前端】基础篇18，为什么会出现页面乱码？如何解决？、 BFC、IFC、GFC、FFC的区别、数据类型判断typeof与instanceof

1、[HTML] 为什么会出现页面乱码？如何解决？
2、[CSS] BFC、IFC、GFC、FFC的区别是什么？
3、[JS] 数据类型判断typeof与instanceof？

---

1、为什么会出现页面乱码？如何解决？

网页乱码原因：

（1）、网页的字符编码、内容、数据库中读取的数据，编码不一致的时候。
（2）、meta声明和文本编码不一致的时候（很少见）（保存的时候选择编码规则与meta规则不一致）
（3）、浏览器不能检测网页编码、浏览器默认解码规则和网页编码不一致。

解决：

对应上述：
（1）、对于网页：声明meta。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

对于数据库中的数据：查询数据库显示的信息进行转码。
（2）、使用软件开发软件进行编辑HTML网页内容，统一编辑器的编码规则和meta规则。
（3）、手动设置，找到浏览器设置里的“编码”选择合适的编码规则。

补充：中文乱码

注意编码集的选择，有些编码集不支持中文，如IOS-8859-1

补充：各个浏览器默认编码

IE6、IE7、IE8、Firefox 默认编码：gb2312；
Chrome、Safari 默认编码：ISO-8859-1；
Opera默认编码：gbk。

2、BFC、IFC、GFC、FFC的区别是什么

FC（Formatting Context），格式上下文；
BFC（Block Formatting Context），块级框产生的格式上下文；
IFC（Inline Formatting Context），行内框产生的格式上下文；
GFC（GrideLayout formatting contexts），网格布局格式化上下文；
FFC（Flex formattin contexts），自适应格式上下文。

FC

格式上下文，定义框内部的元素渲染规则。
不同类型的框，参与的FC类型不同。

解释：
把FC看作一个盒子，盒子内有很多元素，盒子会隔绝盒子内外的元素（外部的元素渲染不会影响FC内部的渲染）。

注意：不是所有的框都能产生FC，只有符合条件的才会产生，只有产生了对应的FC，才会有对应的渲染规则。

BFC

块级框产生的格式上下文。

（1）、内部box在垂直方向，一个接着一个放。
（2）、box垂直方向由margin决定，属于同一个BFC的两个box间的margin会重叠。
（3）、BFC区域不会与浮动框（float box）重叠。
（4）、BFC就是页面上的一个隔离的独立容器，容器里面的子元素与外部元素互不影响。
（5）、计算BFC的时候，浮动元素也会参与计算。

IFC

行内框产生的格式上下文。

（1）、浮动元素可能会处于包含块边缘和行框边缘之间。
（2）、尽管在相同的行内格式化上下文中的行框通常拥有相同的宽度（包含块的宽度）。
（3）、同一行内格式化上下文中的行框通常高度不一样（比如，一个行包含了一张高的图片，别的只包含文本）。
（4）、当一行中行内框宽度的总和小于包含他们的行框的宽度，他们在水平方向上的对齐，取决于“text-align”特性。
（5）、空的行框没有默认宽高，应该被当作0高度框对待（应该被忽视）。

GFC

网格布局格式化上下文。

（1）、当一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，内部子元素就是按网格格式排版的。
（2）、改变传统布局模式，让布局从一维变成二维，布局不在局限于单个维度了，类似九宫格的排版模式。

与table区别：
同为二维表格，但GridLayout会有更加丰富的属性来控制行列。

FFC

自适应格式上下文。

（1）、display为flex或inline-flex的元素将会生成自适应容器/伸缩容器。
（2）、flex容器被渲染为块级元素，inline-flex容器渲染为一个行内元素，容器定义了容器内的项目布局。
（3）、容器内的每一个元素都是自适应项目，自适应项目可以是任意数量的。

BFC与FFC区别

两者有点儿类似，但一些适用于块容器的属性并不适用于flex容器：如column-*、float、clear、vertical-align、::first-line、::first-letter等

补充：

（1）、包含块
一个元素的box的定位和尺寸，会与某一矩形框有关，这个框就称之为包含块。
元素的包含块与它的祖先元素的样式有关系（不仅限于父级）

注意：根元素是初始包含块，它没有父节点，是最顶端的元素。

（2）、控制框
指块级元素、块框、行内元素、行框

3、数据类型判断typeof与instanceof

typeof

一元运算符
typeof xx返回一个字符串，直接判断一个数据的类型。

能判断以下数据类型：
undefined：未定义
boolean：布尔值
string：字符串
number：数值
object：对象、null、数组
function：函数
bigint: bigint
symbol: symbol

缺点：对于丰富的对象实例，只能返回object

instanceof

二元运算符
object instanceof constructor返回布尔值。（第二个参数必须为对象，否则会报错）
检测一个构造函数的prototype属性是否出现在某个实例对象的原型链上，需要区分大小写。

arr instanceof Array
它的判断根据原型链进行搜寻，如果arr的原型链上存在另一个对象Array的属性，那么表达式则为true。

补充：constructor

constructor属性可获得变量的构造方法信息，并生成实例。
每个实例对象都会自动获得constructor属性。

function Fun(){}
let fun = new Fun();
console.log(fun.constructor === Fun) //true