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

內盒尺寸計算（元素大?。?/p>

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包含了元素內容寬度、邊框寬度、內距寬度)

內盒尺寸計算（元素大?。?/p>

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"。這可令瀏覽器呈現出帶有指定寬度和高度的框，并把邊框和內邊距放入框中。