js中getBoundingClientRect()方法

getBoundingClientRect()返回值是一个 DOMRect 对象，是包含整个元素的最小矩形（包括 padding 和 border-width）。该对象使用 left、top、right、bottom、x、y、width 和 height 这几个以像素为单位的只读属性描述整个矩形的位置和大小。除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的（卷起的高度是不被计算在内的）。

rectObject.top：元素上边到视窗上边的距离;
rectObject.right：元素右边到视窗左边的距离;
rectObject.bottom：元素下边到视窗上边的距离;
rectObject.left：元素左边到视窗左边的距离;
rectObject.width：是元素自身的宽
rectObject.height是元素自身的高

  <div id="container"><div id="son"></div></div><style>*{margin: 0; padding: 0;}#container{width: 100px;height: 100px;background-color: red;margin-top: 20px;margin-left: 10px;position: relative;}#son{position: absolute;left: 10px;top: 10px;width: 50px;height: 50px;background-color: blue;}</style>let ele = document.getElementById('son');let obj  = ele.getBoundingClientRect();console.log(obj)

我们发现是相当于视口的：
高度方向:top=10+20=30
左侧：left= 10+10 =20

![在这里插入图片描述](https://img-blog.csdnimg.cn/2b6d9a6b14fa40a28c780f90a693e399.png

若给continer设置一个黑色的border,则高度和左侧均需要加1px，则为31px和21px