280956-4ed26a898aa5ef58.png
元素的宽和高分别是100px和100px。查看css代码，我们也可以看到它的width和height分别为100px和100px。当我们设置一个border时：
280956-212bfe325c9db1b4.jpg
，这个元素虽然设置了100px的宽度和100px的高度，但实际上，在添加了内边距和边框后，它的宽度和高度变成了104px和104px；所以，元素实际的宽度和高度是在设置的width和height属性后加上padding和border的宽度和高度的。
例：同一行内设置的两个width：50%的div块会被挤出。
box-sizing:
box-sizing是css3中出现的属性，它允许你设置或检索对象的盒模型组成模式，通过修改属性的值对盒子模型的概念做设置。我们知道，标准的盒子模型的宽是content+borderwidth+padding。box-sizing属性的值中有一个就是解释标准模型的值，它是默认的content-box，一般情况下，我们不使用它。我们使用的是它的其他值，比如：border-box,含义是将盒子的border和padding计算到设置的width中，而不是实际宽度中。所以，如果你设置width为100px，而border为1px的时候，盒子的实际大小仍旧是100px而不是102px。用这个属性，我们就可以完美地解决上面遇到的难题了：只需要在给两个div的css上写下box-sizing:border-box就可以了，保证两个div等宽，拥有1px长度，至于它们的框度是不是50%，你可以喊设计师自己量。除了以上两个值外，box-sizing还有一个padding-box值，顾名思义，就是把内边距计算在设置的框度内，而border是不计算的。
