但是，css3增加了一个盒子属性叫box-sizing，它的值如果是“content-box”，就是以内容（content）为盒子的范围，这个跟css2.1的标准是一样的，而如果是“border-box”，就是以边框（border）为盒子的范围，这也就是说，在这种情况下，width=内容的width+padding+border，如果width的值固定，增加padding或border宽度，则内容的宽度就会自动缩小，而整个盒子的外观尺寸是不会变化的（这个就跟低版本的IE因为没有符合css2.1标准而歪打正着的盒子效果是差不多的，但IE的不包括border）。但是当padding大于width时，盒子的尺寸仍然会被撑破的，这也就是“对于block元素，padding值设置大于盒子宽度，一定会影响元素尺寸”这个说法的由来。
盒子的高度 = content的高度 + padding-top(内上边距)+ padding-bottom(内下边距) + border-top(上边框边框) + border-bottom(下边框)
深入理解CSS盒子模型（The CSS Box Model）
如果了解了盒子模型（box model）的概念，了解它是如何决定某一个元素的最终尺寸的话，会有助理解一个元素如何在网页上定位的。盒子模型主要适用于块级元素。顺便提一个与此相关的概念：行内布局模型（inline layout model）——定义了行内元素是如何定位的，在行内元素格式（InlineFormatting）中有具体说明
盒子的尺寸的计算（Calculating BoxDimensions）
在CSS2.1中，块级元素只能是矩形形状的。当计算一个块级元素的整体尺寸时，需要同时把内容区域（content area）［注释1］的长宽，连同此元素的外边距，内边距，以及边框都计算在内
可以通过声明宽和高来定义一个元素的内容（content）的宽度和高度。如果没有做任何的声明，宽度和高度的默认值将是自动（auto）
对于浮动（floated）和绝对定位（absolutelypositioned）元素（包括固定定位（fixed）元素）来说， 自动状态的宽度会使generated box收缩到紧贴它内容大小。
我们知道，当我们放置一个块级元素于页面上时，并且不设置它的定位属性（relative，absolute，fixed），即position:static，或者设置了position:relative的情况下，块的宽度是延伸自动填充满它的父元素的宽度区域
