版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Mabanana/article/details/85194104
1.概念
css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
如:
图中最内部的框是元素的实际内容content，也就是元素框，紧挨着元素狂外部的是内边距padding，其次是边框border，然后最外层就是外边框margin，整个构成了框模型。通常我们设置的背景显示区域就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素
元素框的总宽度=元素的width+padding的左边距和右边距的值+margin的左边距和右边距的值+border的左右宽度
元素框的总高度=元素的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
2.CSS外边距合并
当两个上下方向相邻的元素框垂直相遇时，外边框会合并，合并后的外边框的高度等于两个发生合并的外边距中较高的那个边距值，如图：
3.外边距的意义
4.box-sizing属性
box-sizing : content-box | border-box | inherit;
- content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。即总宽度=margin+border+padding+width
- border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容即总宽度=margin+width。很多CSS框架，都会对盒子模型的计算方法进行简化。
- inherit , 规定应从父元素继承 box-sizing 属性的值
关于border-box的使用：
- 一个box宽度为100%，又想要两边有内间距，这时候用就比较好
- 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。