getClientRects 和 getBoundingClientRect 对比

getClientRects

• 获取元素占据页面的所有矩形区域。
• 返回的是一个包含一个或多个 DOMRect（TextRectangle） 对象的数组。
• 块级元素直接返回盒子模型的矩形范围。
• 行内元素会产生自动换行这类看似分割整体的歧义，所以，会把行内元素（inline）根据它换行划分成多个盒子边界矩形（返回多个DOMRect）。主要区别

<div style="width: 120px">
    <span class="inline">this is inline. this is inline. this is inline. this is inline. this is inline. this is inline.</span>
<div>

共6行

返回6行对应的DOMRect对象

getBoundingClientRect

• 返回值是一个 DOMRect 对象，拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。
• 返回元素的大小及其相对于视口左上角的位置。因此，top，left，right，bottom 可能出现负值。

返回整个span的DOMRect