前端中有很多宽度的定义，scrollWidth、clientWidth、offsetWidth、width的究竟有什么区别，jq中的width() , innerWidth() , outerW

看到问题这么长，你是不是不想看了，那你走吧！

1、废话不多说，上图！！！

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变

看了这段文字，我自己都没怎么看懂，可以试着理解下：

1、对象的实际内容区域  >= 对象内容区域     这是第一个结论！！！

2、从这个结论，我们可以推出第二个结论，scrollWidth >= cilentWidth ,没毛病！！！
3、从图中我们再得出一个结论，对象的实际内容区域 
在某种程度上是包含 对象内容区域  ，而且相互作用，相互影响！！！

2、上面的结论你还是没听懂？？？那么再上图！！！！

从第二张图中可以得出以下几个结论：

**（1）scrollWidth>clientWidth。
（2）scrollWidth为实际内容的宽度。
（3）clientWidth是内容可视区的宽度。
（4）offsetWidth是元素的实际宽度。**

3、offsetWidth和width区别：

（1）offsetWidth属性可以返回对象的：
                                   padding+border+元素width属性值之和，
             style.width返回值就是定义的width属性值。
（2）offsetWidth属性仅是可读属性，而style.width是可读写的。
（3）offsetWidth属性返回值是整数，而style.width的返回值是字符串，并且带有单位。
（4）style.width仅能返回以style方式定义的内部样式表的width属性值。

4、jq中的width() , innerWidth() , outerWidth()，outerWidth(true)又指的是什么呢？是不是很烦？？？

上图！！！

结论：

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerWitdth(true)方法用得比较少，我们一般都是用  : box-sizing: border-box 比较多！