一、元素内大小
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外不包含边框。