css3盒模型

css3中可以通过box-sizing来指定盒子模型，即可指定为content-box、border-box，这样计算盒子大小的方式就发生了变化
可以分成两种情况：
1.box-sizing：content-box 盒子大小为 width + padding +margin content-box此值为默认值，其让元素 维持W3C的标准box mode
2.box-sizing：border-box 盒子大小为 width 就是说 padding和border是包含到width内的

		div: first-child {
			width: 200px;
			height: 200px;
			background-color: skyblue;
			box-sizing: content-box;   /*就是以前的盒模型  w3c*/
			padding: 10px;
			border: 1px solid red;
			/*盒子大小为 width + padding + border    content-
			box：此值为其默认值，其让元素维持w3c的标注box Mode*/

		}
		div: last-child {
			width: 220px;
			height: 200px;
			background-color: purple; 
			padding: 10px;
			box-sizing: border-box;      /* paddding border 不撑开盒子	*/
			border: 15px solid red;
			/*margin: 10px;*/
			/*盒子大小为 width 就是说 padding 和 border 是包含到 width 里面的*/
		}