本文主要介绍了CSS3属性框胶的使用指南，需要的朋友可以参考下





框大小调整用于改变CSS框模型，以改变元素的宽度。

盒尺寸的值如下：


复制代码代码如下所示：
盒尺寸：内容框填充框的边框框| |


默认值为内容的盒子，这对应于在CSS2.1规范，即标准盒模型的计算方法，宽度和高度与宽度的内容区域，高度不包括边框，内边缘和外边缘。

根据MDN，填料箱仍然是一个实验性的属性。宽度和高度包括内容区和内缘，不包括边界和外部证据。

边框包括内边距和边框，不包括外边距，这是IE模式使用的框模型。

例（从MDN）


复制代码代码如下所示：
火狐浏览器的WebKit，歌剧/支持，和 / IE8 +

{。例
-moz盒尺寸：边界盒；
盒尺寸：边框框；
}


对JS的影响
根据MDN的描述：

当你从window.getcomputedstyle高度，你不会考虑箱尺寸，至少Firefox 18（错误520992）和Internet Explorer 9，Chrome 24不。（其他浏览器未经测试）。值得注意的是，IE9 currentstyle不能返回正确的高度值。

我没有测试火狐18和IE9的版本。

关于jQuery中的宽度（）和高度（）的返回值
jQuery 1.8版增加了对框大小的支持，但这也与浏览器是否支持框大小有关。总之，在版本1.8之后，宽度（）和高度（）总是返回内容区域的宽度和高度。


复制代码代码如下所示：





{ #容器
-moz盒尺寸：边界盒；
盒尺寸：边框框；
宽度：500px；
填料：5px；
边境：5px固体激光器；
}






Var $el = $('#container')
无功W = $（）el.width；
console.log（W）





各种浏览器的结果如下

IE6 / 7：500
IE8 / 9 / 10：480
徒步 / 6：480
chrome21 / firefox14：480
IE6 / 7不支持盒尺寸。内容区域的宽度为500，因此输出值也为500。而其他的浏览器都支持这个属性，内容区域的宽度减去填充和边框的价值，并成为480。

另外：the.outerwidth（）and.outerheight（）方法在jQuery不受影响。