DOM 元素的尺寸和偏移属性

一、client 系列

• clientWidth： 盒子可视区域的宽度。
  盒子模型为 content-box 时，clientWidth = width + padding - 纵向滚动条宽度
  盒子模型为 border-box 时，clientWidth = width - border - 纵向滚动条宽度
• clientHeight： 盒子可视区域的高度。
  盒子模型为 content-box 时，clientHeight= height + padding - 横向滚动条高度
  盒子模型为 border-box 时，clientHeight= height - border - 横向滚动条高度
• clientTop： 盒子上边框的高度。
• clientLeft： 盒子左边框的宽度。

二、offset 系列

• offsetWidth： 盒子布局的宽度。
  盒子模型为 content-box 时，offsetWidth = width + padding + border
  盒子模型为 border-box 时，offsetWidth = width
• offsetHeight： 盒子布局的高度。
  盒子模型为 content-box 时，offsetHeight = height+ padding + border
  盒子模型为 border-box 时，offsetHeight = height
• offsetParent： 盒子最近的定位（relative、absolute、fixed、sticky）父级元素
• offsetLeft： 盒子左边框外侧到 offsetParent 左边框内侧的距离
• offsetTop： 盒子上边框外侧到 offsetParent 上边框内侧的距离

三、scroll 系列

• scrollWidth： 返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分，不包含外边距和边框。
• scrollHeight： 返回元素的整体高度，包括由于溢出而无法展示在网页的不可见部分，不包含外边距和边框。
• scrollLeft： 横向滚动条向右的滚动距离，也是 padding 所占位置的外侧到 border 内侧的距离。当滚动条滑动到最右边时，scrollLeft = scrollWidth - clientWidth；没有滚动时，scrollLeft 为 0。
• scrollTop： 横向滚动条向下的滚动距离。