持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情
最近自己实现了一个瀑布流的插件，里面需要获取元素相关的尺寸，所以趁此想总结一下元素尺寸相关的内容。
本文大纲：
1、偏移尺寸（offset）
offset：偏移 offsetLeft、offsetTop、offsetHeight、offsetWidth 偏移尺寸，包含元素在屏幕上占用的所有视觉空间。 元素在页面上的视觉空间由其高度和宽度决定，包括所有内边距（padding）、滚动条和边框（但不包含外边距（margin））。以下4个属性用于取得元素的偏移尺寸。
- offsetTop，元素上边框外侧距离包含元素（也就是offsetParent）上边框内侧的像素数。(不包括元素上边框的高度)。所以offsetTop是相对尺寸，相对于offsetParent。
- offsetLeft，元素左边框外侧距离包含元素（也就是offsetParent）左边框内侧的像素数。(不包括元素左边框的宽度)。所以offsetLeft是相对尺寸，相对于offsetParent。
- offsetHeight，元素在垂直方向上占用的像素尺寸，包括它的高度、水平滚动条高度（如果可见）和上下边框的高度。offsetHeight = 上下border + 上下padding + height，offsetHeight是绝对尺寸，元素本身的高度加上上下内边距和上下边距
- offsetWidth，元素在水平方向上占用的像素尺寸，包括它的宽度、垂直平滚动条宽度（如果可见）和左右边框的宽度。offsetWidth = 左右border + 左右padding + width，offsetWidth是绝对尺寸，元素本身的宽度加上左右内边距和左右边距
再次强调，其中offsetTop和offsetLeft是相对于包含元素的，包含元素保存在offsetParent属性中。
具体尺寸关系图如下：
2、客户端尺寸（client）
client：客户，顾客 元素的
客户端尺寸，包含元素内容及其内边距所占用的空间。
客户端尺寸只有两个相关属性：clientWidth和clientHeight。（不包含边框border） clientWidth：是内容区宽度加左、右内边距宽度。clientWidth = 左右padding + width clientHeight：是内容区高度加上、下内边距高度。clientWidth = 上下padding + height
客户端尺寸实际就是元素内部的空间，因此不包含滚动条占用的空间。这两个属性最常用于确定浏览器视口尺寸，即检测document.documentElement的clientWidth和clientHeight。这两个属性表示视口（或元素）的尺寸。
document.documentElement.clientHeight // 会随着屏幕的大小而变化 document.documentElement.clientWidth // 会随着屏幕的大小而变化
注意：与偏移尺寸一样，客户端尺寸也是只读的，而且每次访问都会重新计算。
具体尺寸图关系如下：
3、滚动尺寸（scroll）
- scrollTop：内容区域顶部隐藏的像素数，设置这个属性可以改变元素的滚动位置。
- scrollLeft：内容区域左侧隐藏的像素数，设置这个属性可以改变元素的滚动位置。
- scrollHeight：没有滚动条出现时，元素内容的总高度。
- scrollWidth：没有滚动条出现时，元素内容的总宽度。
具体尺寸图关系如下：
4、确定元素尺寸
浏览器在每个元素都暴露了getBoundingClientRect()方法，返回一个DOMRect对象，包含6个属性：left、top、right、bottom、height和width。这些属性给出了元素在页面中相对于视口的位置。 其中left，top，right，bottom是相对于视口的位置（ 都是以视口（应该说是可视区域）的左上角为原点（0,0）。不是相对于父级元素的）
-
left：元素的左边框距离视口左边的距离
-
right：元素的右边框距离视口左边的距离（left+元素的width+左右padding+左右border）
-
top：元素的上边框距离视口上边的距离
-
bottom：元素的下边框距离视口上边的距离（top+元素的height+上下padding+上下border）
-
width：左右border + 左右padding + 元素的width
-
height：上下border + 上下padding + 元素的height
这是我之前发表在其他平台上的原创文章。
数风流人物，还看今朝。
我们下篇文章再见！
