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屬性定義盒元素尺寸的計算方法：
正常情況下offsetWidth，offsetHeigth獲取元素的尺寸是足夠了，但是某些元素比如SVG，MathML返回尺寸出錯（這裏不考慮）。即便如此CSS3還增加了一個box-sizing選擇盒子模型，於是jQuery裏面就引入augmentWidthOrHeight這個方法來處理因爲box-sizing設置導致的尺寸問題，augmentWidthOrHeight方法其實就是對盒子模型的一個處理，所以jQuery獲取一個元素的widht/height
都是，ele.offsetWidt/offsetHeigth + augmentWidthOrHeight()方法纔可以。
- content-box：默認值，計算方法爲 width/height=content，表示指定的寬度和高度僅限內容區域，邊框和內邊距的寬度不包含在內。
- padding-box：計算方法爲 width/height=content+padding，表示指定的寬度和高度包含內邊距和內容區域，邊框寬度不包含在內。
- border-box：計算方法爲 width/height=content+padding+border，表示指定的寬度和高度包含邊框、內邊距和內容區域。
- inherit：表示繼承父元素中box-sizing屬性的值。
關於augmentWidthOrHeight方法：
1.8增加了對css屬性box-sizing的支持，需要注意與1.7.2的區別了。
1.7.2及以前的版本無論是否定義box-sizing: border-box返回的都是盒模型中元素內容的寬度或高度，不包括padding和border。
augmentWidthOrHeight方法是特別針對盒子模型的處理，例如，假如您需要並排放置兩個帶邊框的框，可通過將 box-sizing 設置爲 "border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中。
eq:
box-sizing <!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> .imgBox img { width: 40px; height: 40px; padding: 20px; border: 20px solid orange; margin: 10px; } #contentBox { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; } #borderBox { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #paddingBox { -moz-box-sizing: padding-box; -webkit-box-sizing: padding-box; -o-box-sizing: padding-box; -ms-box-sizing: padding-box; box-sizing: padding-box; } </style> <title>jQuery.width</title> </head> <body> <div class="imgBox"><img id="contentBox" src="" alt=""/>contentBox</div> <div class="imgBox"><img id="borderBox" src="" alt=""/>borderBox</div> <div class="imgBox"><img id="paddingBox" src="" alt=""/>paddingBox</div> <ul></ul> <script> var contentBox = document.getElementById('contentBox'); var borderBox = document.getElementById('borderBox'); var paddingBox = document.getElementById('paddingBox'); $('body').append('<li>contentBox:' + contentBox.offsetWidth + '</li>\n <li>borderBox:' + borderBox.offsetWidth + '</li>\n <li>paddingBox:' + paddingBox.offsetWidth + '</li>') </script> </body> </html>