我猜你学习CSS时首先学的是盒模型，甚至在这里就栽了跟头。因为在传统的盒模型中，元素大小包含了内边距和边框。

在一个宽和高都为100px的元素上定义10px的内边距值和5px的边框，那么它的宽度和高度将是130px（100px + 20px + 10px = 130px），这是所有现代浏览器里的默认盒模型。在CSS3中，它被称为content-box。

在固定宽度的设计中，这种传统的盒模型很少出问题，但是当我们开发响应式设计的时候就比较头疼了。因为CSS一直不能很好地混合使用固定单位和百分比单位的尺寸，比如px和em。

例如，我们想象一个元素，它占满100%的浏览器窗口。如果给它10px的内边距值，这时它的宽度是多少？然后，再给它添加一条5px的边框，这时它的宽度是多少？之前处理这种问题时，我们都是嵌套一个使用像素px作为单位的元素，然后再使用百分比。

为了解决在同一个元素上混合使用像素px和百分比单位的问题，CSS引入了另一种盒模型类型——border-box。border-box可以使内边距值和边框值算进元素本身的尺寸里，而不是在元素本身尺寸上增加。这使得下面这个section在拥有像素px单位的内边距和边框时，依然可以使用百分比单位。

section { 
width : 100% 
padding : 10px; 
border : 5px solid rgb(235, 244, 246); 
box-sizing : border-box; }

这个例子中使用了content-box，内边距和边框是添加到元素本身尺寸上的。

而使用border-box时，内边距和边框是算到元素本身尺寸里的。

border-box的这些尺寸计算方式，是否能让我们绘制出预期的元素，其实在微软IE6浏览器之前的版本上是不行的。