部分摘自 https://www.cnblogs.com/sj1988/p/6600829.html
三大系列：offset（偏移）、scroll（滾動）、client（可視區、客戶端）
事件對象：event（事件被觸動時，鼠標和鍵盤的狀態）（通過屬性控制）
家族關係
相同點在於三大系列都是以DOM元素節點的屬性形式存在的。 類比訪問關係，也是以屬性形式存在。
不同點在於，訪問關係是爲了獲取其他節點，而三大系列是爲了獲取元素節點更多的信息。
offset（偏移）
offset：偏移、補償、位移
offset 系列是 js 中的一套獲取元素尺寸的便捷辦法。
（1） offsetWidth 和 offsetHeight（檢測盒子自身寬高+padding+border） 這兩個屬性，他們綁定在了所有的節點元素上。獲取之後，只要調用這兩個屬性，我們就能夠獲取元素節點的寬和高。 行內式、內嵌式、外鏈式都可以獲取到。
offsetWidth = width + padding + border；
offsetHeight = Height + padding + border； 不包括margin。
（2） offsetLeft 和 offsetTop （檢測距離父盒子有定位的左/上面的距離） 返回距上級盒子中帶有定位的盒子左邊和上邊的距離。和盒子本身有無定位無關。 如果父級都沒有定位則以 body 爲準。 offsetLeft 從父級的 padding 開始算，父級的 border 不算。 在父盒子有定位的情況下，offsetLeft == style.left (去掉px)
（3） offsetParent （檢測父系盒子中帶有定位的父盒子節點）（極少用）
① 返回該對象帶有定位的父級
② 如果當前元素的父級元素沒有CSS定位（position爲absolute / relative / fixed）， offsetParent爲body；
如果當前元素的父級元素中有CSS定位（position爲absolute / relative / fixed），offsetParent 取最近的那個有定位的父級元素。 和盒子本身有無定位無關。
區別
（4） offsetLeft 和 style.left 區別
1> 最大區別在於offsetLeft 可以返回沒有定位盒子的距離左側的位置。 而 style.left不可以。
2> offsetLeft 返回的是數字，而 style.left 返回的是字符串，除了數字外還帶有單位：px。
3> offsetTop/offsetLeft 只讀，而 style.top/style.left 可讀寫。（只讀是獲取值，可寫是賦值）
4> 如果沒有給 HTML 元素指定過 top 樣式，則style.top 返回的是空字符串。 （style.left在等號的左邊和右邊還不一樣。左邊的時候是屬性，右邊的時候是值。）
5> 如果沒有加定位，style.left獲取的數值可能是無效的
6> 最大區別在於offsetLeft以border左上角爲基準，style.left以margin左上角爲基準
（5）offsetHeight和style.height的區別
1> style.height只能獲取行內樣式，offsetHeight可以獲取行內樣式和內嵌樣式
2> style.height是字符串（而且帶單位），offsetHeight是數值
3> style.height可讀可寫，offsetHeight是隻讀屬性
scroll 滾動
1）ScrollWidth 和 scrollHeight 對象內部實際內容的高度/寬度，包括內容區和內邊距（不包括border） 檢測盒子的寬高。（調用者：節點元素。屬性。） 盒子內容的寬高。（如果有內容超出了，顯示內容的高度） IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
2）scrollTop 和 scrollLeft 網頁，被瀏覽器遮擋的頭部和左邊部分。 被捲去的頭部和左邊部分。
3）有兼容性問題
① 未聲明 DTD 時（谷歌只認識他） document.body.scrollTop
② 已經聲明DTD 時（IE678只認識他） document.documentElement.scrollTop
③ 火狐/谷歌/ie9+以上支持的 window.pageYOffset
4）兼容寫法
var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var aaa = document.documentElement.scrollTop + document.body.scrollTop;
client 可視區、客戶端
（1）clientWidth 和 clientHeight clientWidth：獲取網頁可視區域寬度（兩種用法） clientHeight：獲取網頁可視區域高度（兩種用法）
包括內容區和內邊距，不包括邊框
調用者不同，意義不同： 盒子調用，指盒子本身；body/html調用，指可視區域大小。
（2）clientX 和 clientY clientX：鼠標距離可視區域左側距離（event調用） clientY：鼠標距離可視區域上側距離（event調用）
幾乎不用，因爲滾動條不會在頂部和左側
（3） clientTop 和 clientLeft
獲取盒子的 border 寬高
event 事件對象
（1）概述
在觸發DOM上的某個事件時，會產生一個事件對象event，這個對象中包含着所有與事件有關的信息。
所有瀏覽器都支持event對象，但支持的方式不同。 比如鼠標操作時候，會添加鼠標位置的相關信息到事件對象中。（類似Date） 普通瀏覽器支持 event（帶參，任意參數）
ie 678 支持 window.event（無參，內置）
總結：他是一個事件中的內置對象。內部裝了很多關於鼠標和事件本身的信息。
（2） 事件對象 event 的獲取
IE678中，window.event 在火狐谷歌中，event或者，在事件綁定的函數中，加參，這個參數就是event. Box.onclick = function (aaa){ aaa就是event }
（3） 兼容獲取方式有兩種：
不寫參數直接使用event;
寫參數，但是參數爲event
var event = event || window.event;(主要用這種)
（4） event 重要內容
（5） screenX、pageX 和 clientX 的區別
pageY/pageX: 鼠標位於整個網頁頁面的頂部和左側部分的距離。（頁面）
pcreenY/screenX: 鼠標位於屏幕的上方和左側的距離。（屏幕）
clientX/clientY: 鼠標位於瀏覽器的左側和頂部的距離。（瀏覽器大小和位置）
（6） pageY 和 pageX 的兼容寫法
在頁面的位置 = 看得見的 + 看不見的
pageY/pageX=event.clientY/clientX+scroll().top/scroll().left
三大家族區別（總結）
代碼實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
padding: 20px;
border: 10px solid #000;
}
p{margin-bottom: 20px;}
</style>
</head>
<body>
<div id="box">
<p>我是MT</p>
<p>我是MT</p> <p>我是MT</p>
<p>我是MT</p> <p>我是MT</p>
<p>我是MT</p> <p>我是MT</p>
<p>我是MT</p>
</div>
<script>
var box = document.getElementById("box");
// 1. width 和 height
// border + padding + 內容的寬度和高度
console.log(box.offsetWidth, box.offsetHeight);//260260
// padding + 內容的寬度和高度
console.log(box.clientWidth, box.clientHeight);//240240
// 能夠滾動的內容的 寬度 和 高度
console.log(box.scrollWidth, box.scrollHeight);// 最小爲padding+內容寬高，最大包括溢出部分的內容
// 2. top 和 left
// 當前元素距離有定位的父盒子左邊的距離；
//offsetTop: 當前元素距離有定位的父盒子上邊的距離
console.log(box.offsetLeft, box.offsetTop);//
// clientLeft: 左邊邊框的寬度；clientTop: 上邊邊框的寬度
console.log(box.clientLeft, box.clientTop);
//scrollLeft: 左邊滾動的長度; scrollTop: 上邊滾動的長度;
console.log(box.scrollLeft, box.scrollTop);
</script>
</body>
</html>
（1） Width 和 height
- clientWidth = width + padding
- clientHeight = height + padding
- offsetWidth = width + padding + border
- offsetHeight = height + padding + border
- scrollWidth = 內容寬度（不包含border）
- scrollHeight = 內容高度（不包含border）
（2） top 和 left
- offsetTop/offsetLeft ：
-
調用者：任意元素。(盒子爲主) -
作用：距離父系盒子中帶有定位的距離。 - scrollTop/scrollLeft:(盒子也可以調用，必須有滾動條)
-
調用者：document.body.scrollTop/.....(window) -
作用：瀏覽器無法顯示的部分（被捲去的部分） - clientY/clientX:（clientTop/clientLeft 值的是border）
-
調用者：event.clientX(event) -
作用：鼠標距離瀏覽器可視區域的距離（左、上）
獲得屏幕寬高
window.screen.width
window.screen.height
//一般放大圖片，讓圖片顯示在屏幕中間
/*
1.獲取屏幕寬高並減去圖片寬高
2.反轉時要設置
圖片css設置 translate(-50%, -50%)
*/
分辨率是屏幕圖像的精密度，指顯示器所能顯示的像素有多少。