<p class="zw">我猜你学习CSS时首先学的是盒模型，甚至在这里就栽了跟头。因为在传统的盒模型中，元素大小包含了内边距和边框。</p> <p class="zw">在一个宽和高都为<code>100px</code>的元素上定义<code>10px</code>的内边距值和<code>5px</code>的边框，那么它的宽度和高度将是<code>130px</code>（100px + 20px + 10px = 130px），这是所有现代浏览器里的默认盒模型。在CSS3中，它被称为<code>content-box</code>。</p> <p class="zw">在固定宽度的设计中，这种传统的盒模型很少出问题，但是当我们开发响应式设计的时候就比较头疼了。因为CSS一直不能很好地混合使用固定单位和百分比单位的尺寸，比如<code>px</code>和<code>em</code>。</p> <p class="zw">例如，我们想象一个元素，它占满100%的浏览器窗口。如果给它<code>10px</code>的内边距值，这时它的宽度是多少？然后，再给它添加一条<code>5px</code>的边框，这时它的宽度是多少？之前处理这种问题时，我们都是嵌套一个使用像素<code>px</code>作为单位的元素，然后再使用百分比。</p> <p class="zw">为了解决在同一个元素上混合使用像素<code>px</code>和百分比单位的问题，CSS引入了另一种盒模型类型——<code>border-box</code>。<code>border-box</code>可以使内边距值和边框值算进元素本身的尺寸里，而不是在元素本身尺寸上增加。这使得下面这个<code>section</code>在拥有像素<code>px</code>单位的内边距和边框时，依然可以使用百分比单位。</p> <pre class="代码无行号"><code>section { width : 100% padding : 10px; border : 5px solid rgb(235, 244, 246); box-sizing : border-box; }</code></pre> <p class="图"><img alt="1501.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/144.jpg"></p> <p class="图题">这个例子中使用了<code>content-box</code>，内边距和边框是添加到元素本身尺寸上的。</p> <p class="图"><img alt="1502.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/145.jpg"></p> <p class="图题">而使用<code>border-box</code>时，内边距和边框是算到元素本身尺寸里的。</p> <p class="zw"><code>border-box</code>的这些尺寸计算方式，是否能让我们绘制出预期的元素，其实在微软IE6浏览器之前的版本上是不行的。</p>
