前端高频面试题一日速成复习指南 | 前端进阶之旅

一天快速复习完高频面试题

# 1 CSS

# 盒模型

有两种， IE 盒子模型、W3C 盒子模型；

盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；

区别： IE的content部分把 border 和 padding计算了进去;

标准盒子模型的模型图

从上图可以看到：

盒子总宽度 = width + padding + border + margin;
盒子总高度 = height + padding + border + margin

也就是，width/height 只是内容高度，不包含 padding 和 border 值

IE 怪异盒子模型

从上图可以看到：

盒子总宽度 = width + margin;
盒子总高度 = height + margin;

也就是，width/height 包含了 padding 和 border值

页面渲染时，dom 元素所采用的布局模型。可通过box-sizing进行设置

通过 box-sizing 来改变元素的盒模型

CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

box-sizing: content-box; 默认的标准(W3C)盒模型元素效果，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
box-sizing: border-box; 触发怪异(IE)盒模型元素的效果，元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
box-sizing: inherit; 继承父元素 box-sizing 属性的值

小结

盒子模型构成：内容(content)、内填充(padding)、边框(border)、外边距(margin)
IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型)
标准(W3C)盒模型：元素宽度 = width + padding + border + margin
怪异(IE)盒模型：元素宽度 = width + margin
标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高

# BFC

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

IE下为 Layout，可通过 zoom:1 触发

触发条件:

根元素，即HTML元素
绝对定位元素 position: absolute/fixed
行内块元素 display的值为inline-block、table、flex、inline-flex、grid、inline-grid
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden

规则:

属于同一个 BFC 的两个相邻 Box 垂直排列
属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
BFC 中子元素的 margin box 的左边，与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)

在CSS中，BFC代表"块级格式化上下文"（Block Formatting Context），是一个用于布局元素的概念。一个元素形成了BFC之后，会根据BFC的规则来进行布局和定位。在理解BFC中子元素的margin box与包含块（BFC）的border box相接触的概念时，可以考虑以下要点：

外边距折叠（Margin Collapsing）： 在正常情况下，块级元素的外边距会折叠，即相邻元素的外边距会取两者之间的最大值，而不是简单相加。但是，当一个元素形成了BFC时，它的外边距不会和其内部的子元素的外边距折叠。
相邻边界情况： BFC中子元素的margin box的左边会与包含块的border box的左边相接触，这意味着子元素的外边距不会穿过包含块的边界，从而保证布局的合理性。

下面是一个示例代码，帮助你更好地理解这个概念：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="container"