CSS3属性box-sizing使用指南

`box-sizing`是CSS中的一个重要属性，它改变了盒子模型的计算方式，从而影响了元素的宽高计算。这个属性允许开发者根据需求调整盒子的大小计算方式。

`box-sizing`有三种取值：

`content-box`：这是CSS2.1规范中的标准盒子模型计算方式。在这种模式下，元素的`width`和`height`仅包括内容区的宽与高，不包括边框、内边距和外边距。

`padding-box`：这是一个实验性的属性。在这种模式下，元素的`width`和`height`包括了内容区和内边距，但不包括边框和外边距。

`border-box`：这种模式包括了内边距和边框，但不包括外边距。这是IE的怪异模式（Quirks mode）中使用的盒子模型。

对于浏览器支持方面，不同的浏览器对`box-sizing`属性的支持程度有所不同。例如，Firefox 18和Internet Explorer 9及以上版本开始支持该属性。至于较早的IE版本如IE6和IE7则不支持此属性。不同的浏览器在处理JavaScript获取元素高度和宽度时也存在差异。例如，在某些浏览器中，通过`window.getComputedStyle`获取的高度不会考虑`box-sizing`属性的影响。而在jQuery中，`.width()`和`.height()`方法的返回值在浏览器支持`box-sizing`的情况下会有所不同。具体来说，如果浏览器支持此属性并且jQuery版本为1.8及以上，那么`.width()`和`.height()`将返回内容区的宽度和高度。而对于不支持此属性的浏览器（如IE6和IE7），这些方法的返回值则包括所有的内容区宽度或高度，不考虑边框和内边距的影响。另一方面，`.outerWidth()`和`.outerHeight()`方法不受此属性的影响。这意味着无论元素使用何种盒子模型计算方式，这些方法都将返回包括边框、内边距和外边距在内的宽度或高度。在进行网页开发时，需要根据具体的项目需求和目标浏览器的情况选择合适的盒子模型计算方式来实现期望的效果。对于具有特定布局需求的项目，务必进行充分的浏览器兼容性测试以确保在各种浏览器上都能达到预期的表现效果。