Box-sizing 是 CSS3 的Box属性之一，那他当然也遵循CSS的Box model原理。CSS中Box model是分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，他们相同之处都是对元素计算尺寸的模型，具体说就是对元素的width，height，padding，border以及元素实际尺寸的计算关系。

W3C的标准 Box Model:

外盒尺寸计算（元素空间尺寸）

Element空间高度 = content height + padding + border + margin
Element空间宽度 = content width + padding + border + margin

内盒尺寸计算（元素大小）

Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）

IE传统下 Box Model（IE6以下，不含 IE6 版本或“QuirksMode下IE5.5+”）:

外盒尺寸计算（元素空间尺寸）

Element空间高度 = content Height + margin (Height包含了元素内容宽度，边框宽度，内距宽度)
Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)

内盒尺寸计算（元素大小）

Element Height = content Height (Height包含了元素内容宽度，边框宽度，内距宽度)
Element Width = content Width (Width包含了元素内容宽度、边框宽度、内距宽度)

box-sizing属性定义盒元素尺寸的计算方法：

• content-box：默认值，计算方法为 width/height=content，表示指定的宽度和高度仅限内容区域，边框和内边距的宽度不包含在内。
• padding-box：计算方法为 width/height=content+padding，表示指定的宽度和高度包含内边距和内容区域，边框宽度不包含在内。
• border-box：计算方法为 width/height=content+padding+border，表示指定的宽度和高度包含边框、内边距和内容区域。
• inherit：表示继承父元素中box-sizing属性的值。

正常情况下offsetWidth，offsetHeigth获取元素的尺寸是足够了，但是某些元素比如SVG，MathML返回尺寸出错（这里不考虑）。即便如此CSS3还增加了一个box-sizing选择盒子模型，于是jQuery里面就引入augmentWidthOrHeight这个方法来处理因为box-sizing设置导致的尺寸问题，augmentWidthOrHeight方法其实就是对盒子模型的一个处理，所以jQuery获取一个元素的widht/height 都是，ele.offsetWidt/offsetHeigth + augmentWidthOrHeight()方法才可以。

关于augmentWidthOrHeight方法：

1.8增加了对css属性box-sizing的支持，需要注意与1.7.2的区别了。
1.7.2及以前的版本无论是否定义box-sizing: border-box返回的都是盒模型中元素内容的宽度或高度，不包括padding和border。
augmentWidthOrHeight方法是特别针对盒子模型的处理，例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。