1.1 尺寸相关的属性

clientWidth   获取元素的宽度（包含元素的宽度、内边距，不包括边框和外边距）

clientHeight 获取元素的宽度（包含元素的高度、内边距，不包括边框和外边距）

offsetWidth   获取元素的宽度（包含元素的宽度、内边距和边框，不包括外边距）

offsetHeight  获取元素的高度（包含元素的高度、内边距和边框，不包括外边距）

上面四个方法获取的是数字，不含单位。且为只读属性。

style.width    获取元素的宽度

style.height   获取元素的高度

这两种方法，获取时，需要事先去定义。只能读取内联样式的值，带单位。可读写。

clientLeft   返回左侧边框的厚度

clientTop   返回顶部边框的厚度

    这两个方法获取到的也是纯数字

1.2 位置相关的属性

设置了定位，才会去说位置。static relative absolute fixed sticky

style.top

style.left

style.rigth

style.bottom

absolute绝对定位；如果有定位的父元素，那么相对的就是这个设置了定位的父元素；如果没有设置非静态定位的父元素，那么相对于body。

offsetParent  返回距离该该子元素最近的设置了定位的祖先元素（relative absolute fixed sticky）

offsetLeft   获取当前元素相对于最近的设置了定位的祖先元素左边的偏移量

offsetTop   获取当前元素相对于最近的设置了定位的祖先元素顶部的偏移量

scrollLeft  左边被卷去的距离

scrollTop  上部被卷去的距离

练习：创建一个小球，让小球在页面范围内进行自由的运动，当碰撞到边界，弹回，给一个新的运行速度进行运动。

看完点个赞，是对up主最大的支持......持续更新中....