一、盒子模型的概念
所有的HTML元素可以看做盒子，在css中盒子模型是用来设计和布局时使用。
其本质本质上是一个盒子，封装了周围的HTML元素，它包括：内容（content）、内边距（padding）外边距（margin）、边框（border）几个元素。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。
二、box-sizing属性
- box-sizing:content-box;声明盒子的类型为内容盒子
width = 内容宽
height = 内容高
所占的宽 = border + padding + width
所占的高 = border + padding + height
- box-sizing:border-box;声明盒子的类型为边框盒子
width = 边框以内所有的和
width = border + padding + 内容宽
所以：内容盒子的宽度=内容的宽度
边框盒子的宽度=边框+内边距+宽度