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属性定义盒元素尺寸的计算方法：
正常情况下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"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报
