「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」
CSS3 盒模型
一、基本概念
- 标准盒模型，IE盒模型
- 元素内容（content）、内边距（padding）、边框（border）、外边距（margin）
- 标准盒模型和IE盒模型区别
二、盒模型简介
盒模型，MDN中也叫做 CSS 基础框盒模型。一般是针对单个元素及其边距、内容进行布局。
盒模型的几个要素为：
元素内容（content）、内边距（padding）、边框（border）、外边距（margin）。
CSS 基础框盒模型是 CSS 规范的一个模块，它定义了一种长方形的盒子——包括它们各自的内边距（padding）与外边距（margin ），并根据视觉格式化模型来生成元素，对其进行布置、编排、布局（lay out）。常被直译为盒子模型、盒模型或框模型。
三、标准盒模型和IE盒模型区别
标准盒模型和IE盒模型唯一的区别是内容宽度和高度计算方式的不同。
图片来源于文章 CSS盒模型完整介绍
标准盒模型： width=content，高度同理
IE盒模型： width=content+padding+border，高度同理
四、外边距重叠问题
块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
-
注意外边距重叠问题只是发生在普通文档流的上下外边距，不包括左右外边距。
-
设定float和position=absolute的元素不会产生外边距重叠行为。
解决外边距重叠问题常用的方法是触发BFC，这就又涉及到BFC的相关知识了。
五、BFC
BFC：块级格式化上下文 BFC是一个独立的渲染区域，规定BFC内部的元素无论如何布局，都不会影响外面的元素。
这里先简单介绍一下BFC的触发条件，关于一些特性应该会再写一篇博客来讲。
- 根元素；
- 浮动元素 (
float不为none的元素)； - 绝对定位元素 (元素的
position为absolute或fixed)； overflow的值不为visible的元素；inline-blocks(元素的display: inline-block)；- 弹性盒
flex box(元素的display: flex或inline-flex)； - 表格单元格(元素的
display: table-cell，HTML表格单元格默认属性)；
讲到这里的话估计网上大部分八股文的内容都已经包括了。但是面试官说盒子模型其实还有非常多的知识可以了解，这些MDN上都有写。面试官都把话说到这份上了，那肯定要再补充补充了。
六、内部和外部显示类型
css的box模型有一个外部显示类型，来决定盒子是块级还是内联，以便计算盒子在包含块中的布局。
同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下也是按照正常文档流布局。
最典型的就是一些复合类型
比如display: inline-flex; 外在盒子就是inline，内在盒子就是flex。外在盒子决定了元素要像内联元素一样并排在一排显示，内在盒子则决定了flex布局的特性。
其实display: flex; 也一样，外在盒子就是block，内在盒子就是flex。
七、内联盒模型
图片来源于文章 内联盒模型
1.内容区域(content area)。内容区域指的是一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子(character box)；但是图片这样的替换元素，其显示内容不是文字，因此内容区域可以看成是元素自身。
2.内联盒子(inline box)。“内联盒子”不会让内容成块显示，而是排成一行，这里的内联盒子指的是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”。
3.行框盒子(line box)。每一行就是一个行框盒子，每个行框盒子都是由一个个内联盒子组成，如果换行，那就是两个行框盒子。如果一行里面没有内联元素如一个空的div标签，则不会形成行框盒子。
注意：line-height是作用在行框盒子上的，并最终决定高度(替换元素除外)。
4.包含盒子(containing box)。多行文字组成一个包含块，一个包含块有若干个行框盒子。此盒子由一行一行的“行框盒子”组成。
css规范中更准确的称呼是“包含块”(containing block)。
5.幽灵空白节点(struct)：张鑫旭定义为幽灵空白节点。内联元素的每个行框盒子前面有一个“空白节点”，这个“空白节点”不占据任何宽度，无法选中获取，但是又实实在在存在，表现就如同文本节点一样。
