DOM元素尺寸和位置

offset家族

offsetWidth和offsetHeight：可以获取元素实际大小（width+padding+border）。
可以获取元素的大小，但是不能设置。

box.offsetWidth;
box.offsetHeight;

offsetTop和offsetLeft：
可以获取当前元素相对于父元素的位置。

box.offsetLeft;
box.offsetHeight;

PS:如果父盒子中没有设置相对定位的，那么元素就相对于窗口定边的距离

scroll家族

scrollWidth和scrollHeight：
可以获取滚动内容的元素大小

box.scrollWidth;
box.scrollHeight;

scrollTop和scrollLeft：
获取页面被滚动条卷去的高度和左侧的宽度

box.scrollTop;
box.scrollLeft;

client家族

clientWidth和clientHeight：
这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。（width+padding）

box.clientWidth;
box.clientHeight;

clientLeft和clientTop(完全没用)：
就是borderTop与borderLeft

---

三个家族的区别

• offset家族用来获取元素自身的大小和位置
• scroll家族用来获取 元素内容的大小和位置
• client(客户区、可视区)家族用来获取元素可视区域的大小

---

• 偏移offsetWidth: width + padding + border
• 卷曲scrollWidth: width + padding 不含border
• 可视clientWidth: width + padding 不包含border

如果内容没有超出盒子范围：clientWidth与scrollWidth相同