目录
方法三：用 innerWidth() 和 outWidth() 方法，以及 innerHeight() 和 outHeight() 方法
jQuery中获取元素高宽时还是有些地方需要注意的，省时间的话直接跳到底部总结。
这是页面结构，就一个ID 为box 的div
我们如何获取id为box的div的宽高呢？
可以用以下方法：
方法一：使用 width() 和 height() 方法
控制台输出：
注意点：
1.用width() 和 height() 方法获得的是元素内容区(content)的宽高。(你可以去上面看看我设置的padding和margin)
2.并且获得的值是不带px单位的，这个值可以直接参与运算的。
方法二：用 css() 方法
控制台输出：
注意点：
1.用 css() 方法获得的也是元素内容区(content)的宽高。
2.获得宽高的值是带px单位的，这个值不能直接参与运算。
方法三：用 innerWidth() 和 outWidth() 方法，以及 innerHeight() 和 outHeight() 方法
这里我就只拿 innerWidth() 方法和 outWidth() 方法进行比较，innerHeight() 和 outHeight() 也是一样的计算规则。
控制台输出：
上面的css不用往上翻了，再贴一遍↓↓↓↓
从控制台输出的结果我们可以知道：
innerWidth() : 220 = 内容区width + 2*padding = 200 + 2*10 (不带px单位)
innerWidth() 计算的区域(红色区域)：
outWidth() : 226 = 内容区width + 2*padding + 2*border = 200 + 2*10 + 2*3 (不带px单位)
outWidth() 计算的区域(红色区域)：就比 innerWidth() 多加了border！！！
计算元素高宽的方法总结：
方法一：使用 width() 和 height() 方法
注意点：
1.用width() 和 height() 方法获得的是元素内容区(content)的宽高。
2.并且获得的值是不带px单位的，这个值可以直接参与运算的。
方法二：用 css() 方法
注意点：
1.用 css() 方法获得的也是元素内容区(content)的宽高。
2.获得宽高的值是带px单位的，这个值不能直接参与运算。
方法三：用 innerWidth() 和 outWidth() 方法，以及 innerHeight() 和 outHeight() 方法
innerWidth() : width +2*padding (不带px单位)
outWidth() : width + 2*padding + 2*border (不带px单位)
看到这那恭喜你，你已经理清width(), innerWidth ,outWidth() 之间的计算规则了。
希望我的文章可以帮到你