什么是盒模型

   盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以
   
   拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、 边界(外边距)这就是盒模
   
   型，它的作用是规定了网页元素如何显示以及元素之间的相互关系。盒模型由conten（内容区）
   
   +padding（填充区）+margin（外边界区）+border（边框区）组成。盒模型分为标准盒模型和怪异盒
   模型。
   
   标准盒模型：
   
   设置宽高之后；再设置border和padding。这个盒子的整体的宽高就是 开始设置的宽高
   
   +padding+border；所以刚开始设置的宽高就是内容显示的宽高。
   
   怪异盒模型：
   
   设置了宽高之后；不管有没有再设置border和padding，这个盒子都是前面设置的宽高。
   
   盒子在设置了box-sizing:border-box;后，普通盒模型变成了怪异盒模型了。怪异盒模型在设置width和
   
   height后，再去设置border、padding都是将内容区域变小，不会影响盒子的整体大小，盒子的整体大
   
   小还是前面设置的width和height。