CSS3盒子模型

在我们刚入前端时，我们在用div布局的时候会发现一但加入margin或者padding时，只要盒子大小设置定值时，你就得在原有盒子的大小上减去加入的margin或padding值，才能使盒子大小不变。其实这种盒子模型是CSS2的盒子模型。

在CSS3中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方法就发生了变化。

可以分为两种：

1、box-sizing:content-box盒子大小为width+padding+margin。这种盒子模型也就是CSS2的盒子模型。

2、box-sizing:border-box盒子大小为width。也就是说margin和padding在width中，只要width给值后，不管你怎么改变padding或margin的值，盒子总的大小是不会变的，它只会向内缩，减小内容的区域。

div:first-child {
	width: 200px;
	height: 200px;
	background-color: pink; 
	box-sizing: content-box;  /*  就是以前的标准盒模型  w3c */
	padding: 10px;
	border: 15px solid red;
	/* 盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持W3C的标准Box Mode */
}
div:last-child {
	width: 200px;
	height: 200px;
	background-color: purple;
	padding: 10px;
	box-sizing: border-box;   /* padding border  不撑开盒子 */
	border: 15px solid red;
	/* margin: 10px; */
	/* 盒子大小为 width    就是说  padding 和 border 是包含到width里面的 */
}