图解JQUERY对尺寸及位置的定义(图文讲解)

最近我正在学习JQUERY，深感其在处理元素尺寸和位置方面的功能非常强大。接触到了诸如 innerHeight()、innerWidth()、outerHeight()、outerWidth()等函数，以及与浏览器尺寸和状态相关的动画特效应用。这些功能在创建动态交互和复杂动画时特别有用。

每个函数都有其特定的用途和属性调用，单独看每条解释可能感觉清晰明了，但在实际应用中却容易混淆。比如，对于 position() 和 offset() 这两个函数，我最初也是一头雾水。为了弄清楚这些函数的细微差别，我花了半天时间仔细研究API，并自己动手进行验证。

让我们来理解一下JQUERY对尺寸的定义。理解这些定义后，使用 outerHeight() 和 outerWidth() 等函数时就不会再搞混淆。以高度为例，各个尺寸的计算方法如下：

innerHeight() = 【padding-top】+【height】+【padding-bottom】

outerHeight(false) = 【border-top-width】+【padding-top】+【height】+【padding-bottom】+【border-bottom-width】

outerHeight(true) = 【margin-top】+【border-top-width】+【padding-top】+【height】+【padding-bottom】+【border-bottom-width】+【margin-bottom】

对于位置的定义，我们可以采用一种假想的思维方式：想象电脑屏幕可以向上延伸。这有助于理解JQUERY中的位置定义。很多人可能对 $(document).scrollTop() 感到困惑，但其实这个属性并不仅限于浏览器的滚动条。任何设置了固定高度且 overflow 值为 hidden 的元素，都可以使用此属性。

关于 position() 和 offset()，它们之间的唯一区别是：offset() 衡量的是元素相对于浏览器的偏移，而 position() 衡量的是元素相对于有定位（position 为 relative 或 absolute）的父级元素的偏移。在很多情况下，可能没有父级元素设置了定位，此时 position() 和 offset() 的结果是一样的。但在编写代码时，我们应该清楚应该使用哪一个，以避免后期维护的麻烦。

以上是我对JQUERY位置和尺寸的一些理解，可能存在不准确或错误的地方。为了共同进步，我非常欢迎你分享你的想法和见解。我们一起，一起成长。