JS-位置属性

位置属性

位置	client	offset	scroll
width	填充盒（宽度），盒子可视区域	边框盒（宽度），盒子可视区域	填充盒，盒子未溢出和client相同，盒子溢出表示盒子真实宽度
height	填充盒（高度），盒子可视区域	边框盒（高度），盒子可视区域	填充盒，盒子未溢出和client相同，盒子溢出表示盒子真实高度
left	盒子左边框宽度	盒子左边框相对包含块（定位父盒子）左填充距离：从盒子的外边框到定位父盒子内边框的距离；	盒子左边相对于视口被卷曲的距离
top	盒子上边框宽度	盒子上边框相对包含块（定位父盒子）上填充距离：从盒子的外边框到定位父盒子内边框的距离；	盒子上边相对于视口被卷曲的距离

名词解释：

• 填充盒： 盒子模型中包含内容和填充区域（content + padding）
• 边框盒： 盒子模型中包含内容、填充和边框（content + padding + border）
• 内/外边框： 边框是具有宽度的，无论是那个方向的边框，外边框贴合margin区域，内边框贴合padding区域。

getBoundingClientRect()

getBoundingClientRect() 方法返回元素的边框盒大小及其边框盒 相对于视口的位置。

• top/y: 元素上外边框相对视口的顶部内边框的距离
• left/x：元素左外边框相对视口的左侧内边框的距离
• right：元素右外边框相对视口的左侧内边框的距离
• bottom: 元素下外边框相对视口的顶部内边框的距离
• width: 元素边框盒子宽度
• height: 元素边框盒子高度