在 CSS2 的盒模型中，一个元素的渲染宽度（rendered width）等于 width + padding + border，渲染高度等于 height + padding + border。元素的渲染大小就是它在网页中实际占用的盒子大小。
这种规定在很多时候让人很头疼。比如你想让子元素的 padding- 10px 和 border- 2px，然后填满父元素的所有空间，这时候简单地来一个 100% 和 height: 100% 是会溢出的。当父元素的大小是固定的时候，我们很容易计算出正确的 width 和 height。但是，如果父元素的大小也不是固定的，那就头大了。
实际上，如果是块级元素，不设置子元素的 width 也会自动填满父元素的全部宽度。但是不设置 height 的话，子元素的高度由自己内容来确定。更加糟糕的是，对于 textarea 等元素，不设置它的 width 的话也不会自动填满父元素的宽度。
利用 CSS3 的 box-sizing 属性可以简单的解决这类问题。box-sizing 属性用于设置元素的盒模型，默认值为 content-box 就是 CSS2 的盒模型，而还有一个取值 border-box 表示让元素的 width 和 height 属性包括 padding 和 border 的大小，即让宽度和高度分别与渲染宽度和渲染高度等同。例如:
<!doctype html>
<html><head>
<style type='text/css'>
body {
400px;
height: 400px;
border: 10px solid green;
}
textarea {
box-sizing: border-box;
-moz-box-sizing: border-box;
100%;
height: 100%;
border: 4px solid #246;
padding: 10px;
}
</style>
</head><body>
<textarea>
hello box-sizing
</textarea>
</body></html>
IE8+，Chrome 10+，Safari 5.1+，Opera 9.5+ 都支持 box-sizing 属性。而 Firefox 从 2.0 开始就支持 -moz-box-sizing，但一直没把前缀去掉。
参考资料：
[1] W3C CSS3-UI - ‘box-sizing’ property
[2] MDN - CSS - box-sizing
[3] Can I use CSS3 Box-sizing?
[4] CSS-Tricks - Box Sizing
[5] Start using CSS box-sizing today
[6] 学习CSS布局 - box-sizing