一、偏移量
对于块级元素来说，offsetTop、offsetLeft、offsetWidth、offsetHeight描述了元素相对于offsetParent的边界框。
偏移量：包括元素在屏幕上占用的所有空间，元素的可见大小有高度，宽度决定，包括所有的内边距，滚动条和边框大小(注意：不包含外边距)，本文讲解的属性可获取元素的偏移量
二、相关概念
- offsetHeight：获取元素的高度（在垂直方向上占用的空间大小）。
- offsetWidth：获取元素的宽度（元素在水平方向上占用的空间大小）。
- offsetTop：元素的上外边框至offsetParent元素的上内边框的距离。
- offsetLeft：元素的左外边框距离offsetParent的左内边框的距离。
备注：
- 四个属性都是只读属性，返回单位是像素。
- offsetHeight和offsetWidth返回的大小包括元素的边框、内边距和滚动条高/宽度，不包含伪元素的高度。(标准盒模型下）。
- 这个属性将会 round(四舍五入) 为一个整数，如果想要一个 小数值，请使用element.getBoundingClientRect() 。
三、案例
以下面代码为例，来分别获取元素的偏移量,具体是怎样计算请看下图分析。
四、计算
以标准盒模型为例：
offsetWidth = 可视区的width+左右padding+左右边框 = 450+(10*2)+(8*2)=486
offsetHeight = 可视区的height+上下padding+上下边框 = 190+(10*2)+(8*2)=226
offsetTop：由上面的css可以知道父元素设置padding为100px,所以子元素距离父元素上内边框的距离为100，所以offsetTop = 100
offsetLeft：由上面的css可以知道父元素设置padding为100px,所以子元素距离父元素左内边框的距离为100，所以offsetLeft = 100
标签：元素,边框,offsetLeft,offsetTop,offsetHeight,offsetWidth From： https://www.cnblogs.com/huaan011/p/18639579