写在前面

其实博主本身比较反感做一些面试相关的“应试”文章,有种如临大敌死记硬背的感觉,其实相关的内容我们早就在开发中使用了,只是不曾想用一段确切的文字来描述相关的概念,今天我就试着用最简短的话来概括前端的那些概念。

HTML与CSS

1. 盒模型

所谓盒模型,即 块级元素在计算该节点布局时,它所占宽高,W3C的标准盒模型计算方法是content + padding,CSS3可以通过box-sizing来更改盒模型的计算方式为content + padding + border。

面试考察的盒模型其实对应了我们在Chrome Devtool内选择节点最后的图示,如下图:

Chrome Devtool展示的盒模型

2. BFC

所有的英文概念,我们都要明确它的全称是什么,BFC的概念最早定义在CSS 2.1, 全称为“块格式化上下文(Block Formatting Context)因此还有一种对应的格式化上下文叫做”行内格式化上下文(Inline Formatting Context)。

MDN的定义链接 ,简单概括一下,核心其实是 块级元素(块盒子或表现与块级元素一致,包含inline-block)或浮动元素或定位元素在布局时创建的包含其内部所有元素的上下文内容的区域。

之所以提到BFC,主要是考察对于单个BFC内部的布局特点以及BFC彼此之间的影响,简单来说,有时候我们需要让其内部在同一个上下文内,有时候我们又需要让某一部分脱离其他的影响单独布局,这时候需要创建新的BFC上下文。

3. 变量提升(Hoisting)

首先,变量提升的概念仅出现在 ECMAScript® 2015 之后的文档中。变量提升是一种现象,表现在函数声明和变量声明在编译阶段会被放到内存中,因此会产生先使用后声明但没有undefined或报错的现象。 ,这里需要注意,JS仅提升声明,不提升初始化,且对于大部分JS引擎而言,函数的提升要相对于变量更靠前。