1.1 尺寸相關(guān)的屬性

clientWidth ? 獲取元素的寬度（包含元素的寬度、內(nèi)邊距，不包括邊框和外邊距）

clientHeight 獲取元素的寬度（包含元素的高度、內(nèi)邊距，不包括邊框和外邊距）

offsetWidth ? 獲取元素的寬度（包含元素的寬度、內(nèi)邊距和邊框，不包括外邊距）

offsetHeight ?獲取元素的高度（包含元素的高度、內(nèi)邊距和邊框，不包括外邊距）

上面四個方法獲取的是數(shù)字，不含單位。且為只讀屬性。

style.width ? ?獲取元素的寬度

style.height ? 獲取元素的高度

這兩種方法，獲取時，需要事先去定義。只能讀取內(nèi)聯(lián)樣式的值，帶單位?？勺x寫。

clientLeft ? 返回左側(cè)邊框的厚度

clientTop ? 返回頂部邊框的厚度

????這兩個方法獲取到的也是純數(shù)字

1.2 位置相關(guān)的屬性

設(shè)置了定位，才會去說位置。static relative absolute fixed sticky

style.top

style.left

style.rigth

style.bottom

absolute絕對定位；如果有定位的父元素，那么相對的就是這個設(shè)置了定位的父元素；如果沒有設(shè)置非靜態(tài)定位的父元素，那么相對于body。

offsetParent ?返回距離該該子元素最近的設(shè)置了定位的祖先元素（relative absolute fixed sticky）

offsetLeft ? 獲取當(dāng)前元素相對于最近的設(shè)置了定位的祖先元素左邊的偏移量

offsetTop ? 獲取當(dāng)前元素相對于最近的設(shè)置了定位的祖先元素頂部的偏移量

scrollLeft ?左邊被卷去的距離

scrollTop ?上部被卷去的距離

練習(xí)：創(chuàng)建一個小球，讓小球在頁面范圍內(nèi)進(jìn)行自由的運動，當(dāng)碰撞到邊界，彈回，給一個新的運行速度進(jìn)行運動。

看完點個贊，是對up主最大的支持......持續(xù)更新中....??