什么是盒子模型
CSS盒子模型也叫框模型，具备内容(content),填充(padding),边框(border),边界(margin)这些属性，在CSS中，每一个元素都被视为一个盒子，且每一个盒子都有三个属性：
- border：元素的边框，用于将盒子的边缘与其他盒子分开。
- margin：外边距，表示盒子的边缘与相邻盒子之间的距离，也称为页边空白。
- padding：内边距，表示盒子内容和边框之间的空间。
盒子的width和height指的是内容区域的宽度和高度，增加内边距，边框和外边距不会影响内容区域的尺寸，但是会增加盒子的总尺寸。
盒子模型模式
标准盒子模型：box-sizing:content-box
盒子总宽度=width+padding+border+margin
盒子的总高度=height+padding+border+margin
IE盒子模型（怪异盒子模型）：box-sizing：border-box
盒子总宽度=width+margin；
盒子总高度=height+margin
用户自己设置的width=内容区域的宽度+border+padding
用户自己设置的height=内容区域的高度+border+padding
