基础问答

问题：标准的 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 解决的问题：核心是“隔离布局”

1. 解决 margin 重叠的问题
2. 浮动导致的高度塌陷问题
3. 实现两栏布局

面试追问

1. 两个相邻的 div，高度都设置为 10px，都设置了 margin:10px 之后，他们的总高度是多少？

   总高度为 50px，这两个相邻的 div 出现了 margin 重叠的问题。

2. 如果一个设置为 margin:10px，一个设置为 margin:15px，这时候的高度是多少？

   总高度为 margin 10px + height 10px + margin 15px + height 10px + margin 15px = 60px，在 margin 重叠的时候，会选择两个里面最大的 margin 作为此时的边距。

3. 你提到的 margin 重叠是指什么？什么时候会触发这个重叠？

   就是两个相邻的块级元素在垂直方向上设置 margin 的时候，相邻的上下 margin 会合并成一个，其值为二者最大的那个。

   触发重叠需要满足条件：1. 块级元素，2. 元素之间没有 border、padding、content、height 等，即空的区块，3. 区块间未被隔离（参考 MDN 文档中的，没有内容将父元素和后代元素分开）

4. 我不想出现这种重叠，我写的时候是什么样的，就应该是什么样的，怎么处理？

   通过创建 BFC 解决，给其中一个元素套上 BFC 容器即可。

5. BFC 是什么？怎么创建

   BFC 就是一个块级的容器，用来设计其内部的元素布局。

   通过创建浮动元素、绝对定位元素、行内块元素、弹性元素、网格元素、overflow 不为 visible 和 clip 的元素等方式来创建一个 BFC。

6. 我如果使用 overflow: hidden 来触发 BFC，会有什么影响？

   内容会有溢出的可能性，高度溢出后，部分内容不可见。一般通过在内容增加一个容器用于控制内容显示。

7. 问个其他的，margin 和 padding 可以取负值吗？这俩取负值有什么区别。

   padding 是内容区和边框的内部间距，取负值会导致内容区超出盒子边界，可能覆盖其他元素，一般不用。

   margin 是盒子和其他元素的外部边距，一般来说是用于调整元素位置的。