为了理解width，我们创建一个宽200、高100的div来辅助学习：
首先我先给上结论，之后我会用例子验证结论的正确性：
其中，clientWidth和offsetWidth是原生dom对象的属性，其余的是jQuery对象的方法。
那么下面我们开始验证结论的正确性，此时内容宽度是200px，padding和border都是0px。
因此：
再用浏览器开发者工具(F12)的console验证，此时结论正确：
接着，我们给div加上左右padding(左右padding分别设为20px和30px)：
如果你们跟着写这个demo进行验证，可以发现，在浏览器中，这个div变宽了，那是因为此时用css设定的宽度200是针对内容的，而div的可视区域包括padding和border，因此padding变大了，div也就变大了。
我们接着算现在各种方式的宽度：
验证：
我们再给div加上左右border(左右边框分别设为10px和15px)：
计算宽度：
验证：
最后，我们给div加上左右margin(左右margin分别设为16px和32px)：
计算宽度：
验证：
至此幸不辱命，结论悉数验证通过(验证使用的是谷歌核心的浏览器)，不过还有一点要说明一下：
上面我们说过，css设定的宽度200是针对内容的，其实当我们给div加上样式 box-sizing:border-box 的时候， width:200px 的作用范围就变成也包括border和padding，我们再来验证一下上面最后的那个例子，首先计算宽度：
验证：
此种情况下，结论依然正确，希望至此大家已经理解各种获取div宽度的属性和方法。
with(obj){}
就是js中的一个关键字啊，他的意思就是在大括号中的代码的作用域的最顶层对象就是此对象。
js中代码都是在一个作用域链中执行的，所有的变量都是在作用域链的从上往下开始查找，直到找到此变量。
比如下面两段代码。
alert(location)
和
var obj = {location:"aaa"}
with(obj) {
alert(location)
}
上面句代码输出的是window.location对象，下面的代码输出的是obj的location属性 aaa
