什么是盒子模型：
在一个文档中，每个元素都被表示为一个矩形的盒子。
盒子的组成
每个盒子中包含了外边距, 边框, 内边距，内容。
盒模型计算规则
元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度；
元素的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + border的左右宽度；
元素的总高度 = 元素（element）的height + padding的上下边距的值 ＋ border的上下宽度。
box-sizing
上面是默认情况下计算方式，可以通过box-sizing，盒子的宽高通过box-sizing来改变
属性值：
content-box: 默认值，width和height的属性应用在元素的内容框中，内边距，边框，外边距在内容框之外绘制。
border-box: 为元素设置了width和height属性，然后在为元素指定的任何内边距和边框都将在元素设定的width和height中进行绘制的。
inherit：从父元素继承box-sizing属性的值。
盒模型的合并
1.当两个上下方向相邻的元素框垂直相遇时，外边距会合并，取两者中最大的一个作为间距；
2.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
解决合并
1、浮动（float）
2、定位（position：absolute）
3、填充（padding），给父元素在垂直方向上设置padding，以隔开父级元素与子元素的边距；
4、边框（border），给父元素设置边框，来隔开浮级元素与子元素的边距；
5、overflow：hidden；
6、父元素包含子元素，父元素设置flex弹性盒display:flex;。
