网站内链设计网络营销所学课程

最近自己实现了一个瀑布流的插件，里面需要获取元素相关的尺寸，所以趁此想总结一下元素尺寸相关的内容。

本文大纲：

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