box-sizing

box-sizing

box-sizing官方定义：规定两个并排的带边框的框
刚一开始并不知道怎么回事。继续查阅得知它有两个属性：

1. box-sizing:content-box:在宽度和高度之外绘制元素的的内外边距和边框
2. box-sizing:border-box:在已设定的宽度和高度之内绘制内外边距和边框

图解如下：

• box-sizing: border-box

.wrap {
		height: 200px;
		width: 200px;
		padding: 20px;
		margin: 20px;
		background-color: pink;
		border: 1px solid #eee;
		box-sizing: border-box;
	}

这个div的高度和宽度为200px;border为1px;margin和padding都是20px;效果如下：

可以看出，内边距和border都是在原先设定好的宽度和高度绘制的，而外边距则是在原先设定的高度和宽度之外绘制的。

• box-sizing: content-box
  当把border-box换做content-box的时候，效果如下图：
  
  可以看出内外边距和border都是在原先设定的宽度和高度之外绘制的
• 总结：
  可能这就是二者的而区别吧，内边距和border是否在原来设定的宽度和高度内绘制。
  另外浏览器默认的是内边距和border属于原来设定宽度的一部分，也就是说，设置的padding和border都要从高度和宽度里面里扣除，表面上的width和height是改变的。