一探究竟：box-sizing

box-sizing是css3的性属性，关于这个属性，官方的解释是 ：“box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。” 这个解释对于新使用box-sizing 的人或许不是很好理解。要理解这个属性，还得从css的盒子模型说起。

说到css的盒子模型，大家都不会陌生。首先，盒子模型本身有两种模式：标准模式和怪异模式。关于标准模式和怪异模式的解释，在这里不多述说了。下面我们用div定义的“盒子”来理解这两种模式之间的差异。

我们定义一个div：

.box{
	width:100px;
	height:100px;
	border:10px #ddd solid;
	padding:10px;
	margin:10px;
}   

　　

在chrome浏览器下解析是这样的：

此时，box的width/height 实际上不包含padding和border,即box内容区的宽/高 = 100px;此时，是标准模式的盒模型

如果加上box-sizing:border-box

.box{
	width:100px;
	height:100px;
	border:10px #ddd solid;
	padding:10px;
	margin:10px; 
        box-sizing:border-box;
}   

　　

此时，box的width/height 实际上包含了padding和border,即box内容区的宽/高 = 60px; 此时，是怪异模式的盒模型。

box-sizing的主要属性有两种：border-box和content-box，默认情况下，浏览器是按content-box即标准模式解析盒模型的，上面第一种情况即是。如果定义了box-sizing:border-box；浏览器就会以怪异模式解析盒子模型了

box-sizing是css3的属性，对于我们css盒子模型的兼容问题提供了很好的帮助，更可喜的是，连我们的IE8也支持了这一属性。

转载于:https://www.cnblogs.com/paul-myweb/p/5250382.html