前言
這幾天接觸獲取元素位置的信息比較多，感覺有點混淆了，感覺位置有好多種的獲取方式，而且每一種的獲取方式的使用範圍和作用範圍都是有一點區別的，爲了能夠區分的好一點，於是做一個小小的總結，能夠有所收穫。
盒子模型
此模型在使用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