基础问答
问题：标准的 CSS 盒子模型是怎样的？
答案：标准盒子模型由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）组成。在 content-box 模式下，width 和 height 属性仅指内容区域的宽度和高度，元素实际占据的宽度 = width + padding + border + margin，高度同理。
扩展延伸
关于盒子模型，其实问答上都是比较基础的，在这里就仅扩展了解一下 BFC 。
BFC：Block Formatting Context，区块格式上下文，是块级盒子布局过程发生的位置。
定义比较拗口，我们换句大白话，就是 BFC 是个容器，其内部的 DOM 元素按照一定的规则进行排列，多个 BFC 之间互相不影响。
关于 BFC 的规则：
- BFC 就是一个块级元素，遵循块级元素在文档流上的排列规则（一个块级元素占一行，从上到下依次排列）
- 是一个独立的容器，内部元素不会影响到外部。
- 同一个 BFC 内部的元素之间，相邻元素的 margin 会有重叠。
- 浮动元素会参与 BFC 的高度计算。
BFC 解决的问题：核心是“隔离布局”
- 解决 margin 重叠的问题
- 浮动导致的高度塌陷问题
- 实现两栏布局
面试追问
- 两个相邻的 div，高度都设置为 10px，都设置了 margin:10px 之后，他们的总高度是多少？
总高度为 50px，这两个相邻的 div 出现了 margin 重叠的问题。
- 如果一个设置为 margin:10px，一个设置为 margin:15px，这时候的高度是多少？
总高度为 margin 10px + height 10px + margin 15px + height 10px + margin 15px = 60px，在 margin 重叠的时候，会选择两个里面最大的 margin 作为此时的边距。
- 你提到的 margin 重叠是指什么？什么时候会触发这个重叠？
就是两个相邻的块级元素在垂直方向上设置 margin 的时候，相邻的上下 margin 会合并成一个，其值为二者最大的那个。
触发重叠需要满足条件：1. 块级元素，2. 元素之间没有 border、padding、content、height 等，即空的区块，3. 区块间未被隔离（参考 MDN 文档中的，没有内容将父元素和后代元素分开）
- 我不想出现这种重叠，我写的时候是什么样的，就应该是什么样的，怎么处理？
通过创建 BFC 解决，给其中一个元素套上 BFC 容器即可。
- BFC 是什么？怎么创建
BFC 就是一个块级的容器，用来设计其内部的元素布局。
通过创建浮动元素、绝对定位元素、行内块元素、弹性元素、网格元素、overflow 不为 visible 和 clip 的元素等方式来创建一个 BFC。
- 我如果使用
overflow: hidden来触发 BFC，会有什么影响？
内容会有溢出的可能性，高度溢出后，部分内容不可见。一般通过在内容增加一个容器用于控制内容显示。
- 问个其他的，margin 和 padding 可以取负值吗？这俩取负值有什么区别。
padding 是内容区和边框的内部间距，取负值会导致内容区超出盒子边界，可能覆盖其他元素，一般不用。
margin 是盒子和其他元素的外部边距，一般来说是用于调整元素位置的。
