什么是盒子模型
当对一个文档进行布局的时候，浏览器的渲染引擎会将所有的元素表示成一个个的矩形盒子。CSS盒模型本质上就是一个盒子，封装周围的HTML元素。它包括四个部分: 边距（margin）， 边框（border），填充（padding），内容（content）。
下面的图片说明了盒子模型（图片来源于网络，侵删） ：
- Margin （外边距）。边框外的部分。用空白区域来扩充边框外的部分。以分开相邻的元素
- Border（边框）。围绕在内边距和内容外的边框
- Padding（内边距）。 扩展自内容区域，填充元素中内容和边框的部分
- Content（内容）。盒子即元素的内容。
盒模型分类
由于历史原因，CSS的盒模型分为两类——W3C标准盒模型和IE盒模型。 这两个盒模型最核心的区别就是在IE的盒子模型其content的部分包含了padding和border。而标准盒子模型content部分即为content部分，不包含其他的部分。
标准盒子模型:
IE盒子模型：
元素的width和height属性
当我们在设置元素的width和height属性的时候，我们设置的是盒模型的content区域的大小。对应到盒模型上就是:
标准盒模型：
width = content的宽度
height = content的高度
IE盒模型：
width = border + padding + content的宽度
height = border + padding + content 的高度
CSS如何设置这两种盒子模型
利用CSS的属性box-sizing可以设置这两个盒子模型
box-sizing: content-box; (标准盒子模型)
box-sizing: border-box; (IE盒子模型）