Box-sizing 是 CSS3 的Box屬性之一，那他當(dāng)然也遵循CSS的Box model原理。CSS中Box model是分為兩種，第一種是W3C的標(biāo)準(zhǔn)模型，另一種是IE的傳統(tǒng)模型，他們相同之處都是對(duì)元素計(jì)算尺寸的模型，具體說就是對(duì)元素的width，height，padding，border以及元素實(shí)際尺寸的計(jì)算關(guān)系。

W3C的標(biāo)準(zhǔn) Box Model:

外盒尺寸計(jì)算（元素空間尺寸）

Element空間高度 = content height + padding + border + margin
Element空間寬度 = content width + padding + border + margin

內(nèi)盒尺寸計(jì)算（元素大小）

Element Height = content height + padding + border （Height為內(nèi)容高度）
Element Width = content width + padding + border （Width為內(nèi)容寬度）

IE傳統(tǒng)下 Box Model（IE6以下，不含 IE6 版本或“QuirksMode下IE5.5+”）:

外盒尺寸計(jì)算（元素空間尺寸）

Element空間高度 = content Height + margin (Height包含了元素內(nèi)容寬度，邊框?qū)挾?，?nèi)距寬度)
Element空間寬度 = content Width + margin (Width包含了元素內(nèi)容寬度、邊框?qū)挾取?nèi)距寬度)

內(nèi)盒尺寸計(jì)算（元素大?。?/p>

Element Height = content Height (Height包含了元素內(nèi)容寬度，邊框?qū)挾?，?nèi)距寬度)
Element Width = content Width (Width包含了元素內(nèi)容寬度、邊框?qū)挾?、?nèi)距寬度)

box-sizing屬性定義盒元素尺寸的計(jì)算方法：

• content-box：默認(rèn)值，計(jì)算方法為 width/height=content，表示指定的寬度和高度僅限內(nèi)容區(qū)域，邊框和內(nèi)邊距的寬度不包含在內(nèi)。
• padding-box：計(jì)算方法為 width/height=content+padding，表示指定的寬度和高度包含內(nèi)邊距和內(nèi)容區(qū)域，邊框?qū)挾炔话趦?nèi)。
• border-box：計(jì)算方法為 width/height=content+padding+border，表示指定的寬度和高度包含邊框、內(nèi)邊距和內(nèi)容區(qū)域。
• inherit：表示繼承父元素中box-sizing屬性的值。

正常情況下offsetWidth，offsetHeigth獲取元素的尺寸是足夠了，但是某些元素比如SVG，MathML返回尺寸出錯(cuò)（這里不考慮）。即便如此CSS3還增加了一個(gè)box-sizing選擇盒子模型，于是jQuery里面就引入augmentWidthOrHeight這個(gè)方法來處理因?yàn)閎ox-sizing設(shè)置導(dǎo)致的尺寸問題，augmentWidthOrHeight方法其實(shí)就是對(duì)盒子模型的一個(gè)處理，所以jQuery獲取一個(gè)元素的widht/height 都是，ele.offsetWidt/offsetHeigth + augmentWidthOrHeight()方法才可以。

關(guān)于augmentWidthOrHeight方法：

1.8增加了對(duì)css屬性box-sizing的支持，需要注意與1.7.2的區(qū)別了。
1.7.2及以前的版本無論是否定義box-sizing: border-box返回的都是盒模型中元素內(nèi)容的寬度或高度，不包括padding和border。
augmentWidthOrHeight方法是特別針對(duì)盒子模型的處理，例如，假如您需要并排放置兩個(gè)帶邊框的框，可通過將 box-sizing 設(shè)置為 "border-box"。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。