盒子模型（Box Model）
- margin（外边距或空白、空白边）
- border（边框）
- padding（内边距或填充）
- content（内容）或 element（元素）
各个部分简单说明
- margin:定义元素周围的空间（通俗来讲就是自身边框到另一个容器边框之间的距离）
- padding：定义元素border与content之间的空间。当padding被清除时，所释放的区域将受到element背景颜色的填充。
- border：边框
- content：内容部分，显示文本或图像等。
两种盒子模型
- W3C的标盒模型：包括margin、border、padding、content
<style type="text/css">
.box{
width: 100px;
height: 100px;
border: 1px solid #FF0000;
margin: 10px;
padding: 10px;
}
</style>
<body>
<div class="box"></div>
</body>
盒子占据空间=margin+border+padding+content
盒子实际大小=border+padding+content
这里的width、height如下图所示：
- IE怪异盒模型：
代码同上
盒子占据空间=margin+padding+border+content
盒子实际大小=padding+border+content
这里的width、height如下图所示：
两种盒子模型差异
- W3C标准盒模型的width为content的宽度
- IE怪异盒子模型的width为border+padding+content
- height同理
指定box-sizing属性
- 默认值content-box 宽度和高度应用于元素的内容框，在宽度和高度之外绘制元素的内边距和边框。（相当于W3C标准盒模型）
- border-box 元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。（相当于IE怪异盒子模型）
有不准确的请多多指教啊
来源：https://blog.csdn.net/weixin_43957218/article/details/101066044