CSS盒模型里面的几个宽度问题：offsetWidth,clientWidth,scrollWidth以及jquery的.width()函数

CSS盒模型是CSS定位的基础，搞清楚这几个属性之间的关系对CSS定位是非常重要的，自己学习后总结如下，欢迎大家一起讨论！

盒模型主要包括四个方面：

盒模型里面的内容（content），也就是实实在在要展现的内容，比如P标签里面的文字

盒模型的内边距（padding）,是内容与边框内部之间的距离

盒模型的边框（border）,边框也可以设置宽度

盒模型的外边距（margin）,盒模型的边框外部与其他盒模型边框外部之间的距离

CSS的width和height属性设置的是内容区域(content)的宽高，不包括padding和border

那么这几个宽度分别指的是：

* offsetWidth:指的是盒模型的边框 + 内边距 + 内容的宽度

* clientWidth:指的是盒模型的内边距 + 内容的宽度

* scrollWidth:如果内容超出边框，需要有滚动条，那么scrollWidth获取的是整个文档的内容（而clientWidth获取的只是可见部分的宽度）

对于jquery的width()函数，获取的是内容的宽度

如果在CSS属性里面给盒模型定宽，那么定的其实就是offsetWidth，所有的边框和padding都在此宽度之内进行，注意此时jquery的width()函数获取的仍然是内容的宽度！