前言
这几天接触获取元素位置的信息比较多，感觉有点混淆了，感觉位置有好多种的获取方式，而且每一种的获取方式的使用范围和作用范围都是有一点区别的，为了能够区分的好一点，于是做一个小小的总结，能够有所收获。
盒子模型
此模型在使用CSS进行网页布局的时候会用到的一个模型。里面装有HTML元素的一些内容。一个盒子由外到内分别由四部分组成：margin（页边距），border（边框），padding（内边距）和content（内容）。通过组成可以很形象的看出，margin，border和padding是CSS的属性，我们在设计中通过设置这三个属性来控制盒子的三个部分，然而content就是盒子内部的东西，也就Html元素的内容。
看图和文字很难理解的，实例解析：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#dv {
/*position:absolute;*/
width: 200px;
height: 200px;
/*边框*/
border-bottom: 50px solid blue;
border-left: 50px solid green;
border-top: 50px solid black;
border-right: 50px solid yellow;
/*页边距*/
margin-bottom: 20px;
margin-left: 30px;
margin-top: 40px;
margin-right: 50px;
/*内边距*/
padding-bottom: 20px;
padding-left: 30px;
padding-top: 40px;
padding-right: 50px;
}
</style>
</head>
<body>
<div id="dv">中国加油！！<br />中国万岁！！<br />中国万岁！！<br />中国万岁！！ </div>
</body>
</html>以上代码的运行结果如下：（为了方便验证，推荐大家一款测量像素软件：）
（软件）参考链接：https://blog.csdn.net/u011718737/article/details/52231860/
获取元素位置
这个就有点头疼了，涉及到元素的位置有很多，还是得多实践才能掌握出真知啊。
关于窗口的一些位置信息的获取
1、可视区域的大小
document.documentElement.clientWidth
document.documentElement.clientHeight
2、页面的实际大小
document.documentElement.scrollWidth
document.documentElement.scrollHeight
3、窗口左上角 与 屏幕左上角的 距离
window.screenX、
window.screenY
4、屏幕宽高
window.screen.width
window.screen.height
5、屏幕可用宽高（去除任务栏）
window.screen.availWidth
window.screen.availHeight
6、窗口的外高度、外宽度
window.outerWidth
window.outerHeiht
7、窗口的内高度、内宽度（文档显示区域+滚动条）
window.innerWidth
window.innerHeight
