这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战
我最开始接触到元素尺寸是在实现吸顶、吸底效果的时候，又是offset又是scroll的，傻傻分不清楚。今天希望通过这篇文章来梳理一下几种尺寸，强化认知。
偏移尺寸
偏移尺寸包含元素在屏幕上占有的所有的视觉空间，包括内边距、滚动条和边框，但不包括外边距。
- offsetWidth：元素在水平方向上占有的像素尺寸，包括它的宽度、左右边框的宽度和垂直滚动条的宽度（如果存在的话）
- offsetHeight：元素在垂直方向上占有的像素尺寸，包括它的高度、上下边框的高度和水平滚动条的高度（如果存在的话） 我认为下面这两个属性更能体现“偏移”的概念：
- offsetTop：元素上边框的外侧距离它的包含元素的上边框内侧的像素数
- offsetLeft：元素左边框的外侧距离它的包含元素的左边框内侧的像素数 用图形来标识这些属性会更好理解些：
（红色为元素的外边框，绿色为其包含元素的外边框）
注意：元素的包含元素不一定是其父元素，可以通过offsetParent属性得到。
客户端尺寸
客户端尺寸包含元素内容及其内边距所占的空间，只有两个属性：
- clientHeight：内容区高度加上上下内边距高度
- clientWidth：内容区宽度加上左右内边距宽度 图示如下：
滚动尺寸
我认为这个尺寸是这三个中较难理解的，它提供的是元素内容滚动距离的信息。
- scrollTop：内容区顶部隐藏的像素数，也就是内容滚动的垂直距离
- scrollLeft：内容区左侧隐藏的像素数，也就是内容滚动的水平距离
- scrollHeight：没有滚动条出现时元素内容的总高度(包括padding)
- scrollWidth:没有滚动条出现时元素内容的总宽度（包括padding） 那么scrollHeight和scrollWidth既然也包括padding，那他们和上面提到的客户端尺寸有何区别呢？实际上在不需要滚动的文档上两者是分不清的，而如果文档尺寸超过视口尺寸，那么clientWidth和clientHeight等于视口的大小，scrollHeight和scrollWidth等于文档内容的大小。
