盒子大小的计算，盒子类型的转换

盒子的组成=外边距+内边距+边框+内容区域
盒子分为两种类型,通过设置box-sizing:的值来设置盒子的类型

1.content-box  内容盒子(W3C盒子)
				为内容盒子设置宽和高之后，内容区域的大小即为盒子的宽和高，
				再添加内边距和外边距会使盒子的大小改变

				宽度举例：
					width:100px;	内容区的宽度
					
					盒子的宽度 = width +border-left+border-right+padding-left+padding-right

					盒子在浏览器中宽度= width +border-left+border-right+padding-left+padding-right
									 +margin-left + margin-right

2.border-box   边框盒子(IE盒子)
				设置的宽和高就是盒子的宽度，高度
				再添加内边距和外边距会使挤压内容区，盒子的大小不会改变

				width:100px;    盒子的宽度

					内容区的宽度 = width - border-left+border-right+padding-left+padding-right

					盒子在浏览器中的宽度 = width + marign-left + margin-right