在 CSS 盒子模型中，每个 HTML 的元素都会被当作是一个矩形的盒子，然后对它们进行从上到下，从左到右的布局。 一个盒子通常包括四个区域，从里到外分别是：
- 内容区域：代表盒子的实际内容部分，它是由 width 宽度和 height 高度来确定的
- 内间距区域：代表盒子与实际内容之间的空白区域，由 padding 属性设置
- 边框区域：代表盒子的边框，是内间距区域和外边距区域的边界，由 border 属性设置
- 外边距区域：代表此盒子的边框与相邻的其他盒子边框之间的距离，由 margin 属性设置
分类：
CSS盒模型分为content-box（标准盒模型）与border-box（IE盒模型）。图示分别如下：
两者区别:
它们计算宽度与高度的方式不相同：
- content-box（标准和模型）的盒子总宽度/高度= width/height + padding + border + margin（也就是说width/height 只是内容高度）
- border-box（标准和模型）的盒子总宽度/高度= width/height + margin（width/height 包含了 padding 和 border 值）
如何设置这两种盒模型
- content-box（标准和模型）：
box-sizing: content-box;（浏览器默认） - border-box（标准和模型）：
box-sizing: border-box;（更好用）
外边距合并与解决办法
- 哪些情况下会合并？
- 父子margin合并
- 兄弟margin合并
- 如何阻止合并？
- 父子合并阻止办法：padding/border；overflow:hidden；display:flex
- 兄弟合并阻止办法：inline-block
另附高人的理解
本文参考摘录了知乎文章：1、常见的面试问题：【CSS】CSS盒模型 2、一文搞懂 CSS 盒子模型：概念、种类、布局方式、边距塌陷全都在这里了
