一、元素內大小
clientWidth=元素的寬度+元素padding-left+ 元素padding-right
* :不包含margin和border
clientHeight=元素的高度+元素padding-top+ 元素padding-bottom
* :不包含margin和border
clientLeft=border的寬度
* :不包含margin和padding
clientLeft=border的高度
* :不包含margin和padding
二、元素外大小
offsetWidth
元素的寬度+padding-left+padding-right+boder
* :不包括margin
offsetHeight
元素的高度+padding-top+padding-bottom+boder
*:不包括margin
offsetTop
父類容器沒有定位屬性： 子類的border邊緣算起+子類margin+父類margin+父類padding+父類border
父類容器有定位屬性: 子類的border邊緣算起+子類margin+父類padding
offsetLfet
父類容器沒有定位屬性： 子類的border邊緣算起+子類margin+父類margin+父類padding+父類border
父類容器有定位屬性: 子類的border邊緣算起+子類margin+父類padding
offsetParent
找父類節點
a:如果父類的display屬性值爲none,則返回null;
b:如果父類沒有定位屬性，則繼續往上找，直到body
c:如果父類有定位屬性，則返回父類節點
1：獲取瀏覽器的寬高（不包括工具欄滾動條）
（1.1）：適用於ie9以上其他瀏覽器
window.innerWidth
window.innerHeight
（1.2）：適用於ie9以上瀏覽器
document.documentElement.clientWidth
document.documentElement.clientHeight
（1.3）:獲取body的寬高
document.body.clientWidth
document.body.clientHeight
2：Window的screen對象
目的：獲取屏幕的寬和高
window.screen.availWidth
window.screen.availHeight
詳情見：https://blog.csdn.net/qq_39019768/article/details/80489970
screenX/Y：鼠標位置相對於屏幕的座標
pageX/Y：相對於文檔邊緣（包含滾動條距離）
clientX/Y：相對於當前頁面且不包含滾動條距離
offsetX/Y：相對於當前元素（塊或行內塊），除safari外不包含邊框。