先上個pc端和手機端的圖：

說明：上面的屬性，都是in這個div的屬性值。我是點擊的in這個div的左上角，所以pageX、pageY是40。

HTML：

<div class="out">
　　<div class="in"></div>
</div>

css:

.out{
    width: 300px;
    height: 300px;
    background: skyblue;
    overflow: hidden;
}
.in{
    width: 100px;
    height: 100px
 
;
    padding: 50px;
    margin:20px;
    background: salmon;
    border: 5px solid red;
    overflow: auto;
    position: relative;
    top: 20px;
    left:20px;
}

備註：out這個div的overflow：hidden屬性是必須加上去的，因為如果不加，那麽in這個div設置的margin-top效果就會體現在out這個div上，即out這個div與in這個div上邊線重合，out這個div會體現出margin-top的效果

　　　除了設置overflow：hidden這個屬性外，還可以設置：display：inline-block或者table-cell，或者設置out這個div浮動，或者在out這個div裏加點內容，比如文字等也不會出現這個邊線重合的情況。

註意：除了pageX/Y，clientX/clientY，screenX/screenY 獲取都是通過e.XXX獲取之外，其它的都能直接通過Jq或者Js獲取。

　　　在手機端是指加了<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />這個meta頭部

　　　 這些不針對IE瀏覽器，不針對IE瀏覽器，不針對IE瀏覽器。沒測試過

1.offsetXXX家族

　　1）offsetWidth / offsetHeight ：獲取元素的可見高度值．包括邊框和內部空白補丁．但超出元素的內容則不被計算。$(".in")[0].offsetWidth/offsetHeight //js

　　　　在pc端：

　　　　　　 offsetHeight = clientHeight + border + 橫向滾動條（橫向，橫向，就是overflow-x:scroll出現的那個滾動條的高度，默認應該都是17px）；

　　　　　　　　　　　 = height（設置的高度） + border（上下border） + padding（上下padding）

　　　　　　offsetWidth = clientWidth + border + 縱向滾動條（縱向，縱向，就是overflow-y:scroll出現的那個滾動條的寬度，默認應該都是17px）；

　　　　　　　　　　 = width（設置的寬度） + border（左右border）+ padding（左右padding）

　　　在手機端：

　　　　　　offsetHeight = clientHeight + border；手機端都不算滾動條

　　　　　　　　　　　 = height + padding + border

　　　　　　offsetWidth同理

　　 2）offsetTop / offsetLeft：獲取相對於父級(有css定位的元素，如果沒有就是body元素)距離 頂部的值/左邊的值。$(".in")[0].offsetTop/offsetLeft //js

　　　　由圖片可知道，這兩個屬性值都是40，那麽40是怎麽來的呢？in這個div設置了“相對定位屬性”，top和left都是設置的是20，margin也設置的是20，由於margin是外邊距，相當於把in這個div在原來的基礎上偏移了20px

　　　　所以，在這個例子裏面，offsetTop / offsetLeft就是“相對定位”值top / left值加上margin的值。通俗講就是計算該元素上邊框 / 左邊框與父級的距離

　　3）offset().top / offset().left：這兩個屬性是jQuery操作css的函數。offset() 方法返回或設置匹配元素相對於文檔的偏移。 $(".in").offset().top //jq

　　　　在這個例子裏面，這兩個屬性和上面js的offsetTop屬性的值是相等的，那麽它們是一樣的嗎？ no no no

　　　 ！！！我給out這個div加上margin：20px和position：relative的屬性之後，js的offsetTop / offsetLeft還是40，而offset（）方法得到的值就是60了。

　　　　所以它們還是有區別的，如果父級沒有設置css定位：絕對，fixed，相對這三種定位，那麽offsetTop和offsetLeft和offset（）方法獲取到的值就是一樣的，如果有css定位，offsetTop/offsetLeft就是相對於有定位的父級的距離頂部/左部的值

2.clientXXX家族

　　1）clientX/clientY：相對於瀏覽器窗口可視區域的X，Y坐標（窗口坐標），可視區域不包括工具欄和滾動條。 e.clientX/clientY

　　　　 在上面的例子裏面，由於點擊的是in這個div的左上角，即鼠標點擊的位置離in這個div的左端和上端的距離是0，所以這裏的clientX就是距離瀏覽器窗口最左邊的距離，即out這個div的left值與in這個div的margin-left值之和就是clientX的值。

　　 2）clientWidth/clientHeight：理解為內容可視區域的高度，不包含border，不包含border，不包含border；padding是算在裏面的。$(".in")[0].clientWidth // js

　　　　在pc端：

　　　　　　　clientHeight=height(設置的高度) + padding - 橫向滾動條的高度，如果沒有滾動條就不減；

　　　　　　　clientWidth=width(設置的高度) + padding - 縱向滾動條的高度，如果沒有滾動條就不減；

　　　　在手機端：

　　　　　　 clientHeight=height(設置的高度) + padding；

　　　　 　　 clientWidth同理

　　 3）clientLeft/clientTop：表示一個元素的左邊框/上邊框的寬度，clientLeft是只讀的。$(".in")[0].clientLeft //js

　　　　所以在上面的例子裏面，clientLeft的值為5，因為border的left值為5。clientTop同理。

3.scrollXXX家族：

　　1）scrollTop/scrollLeft：一個元素的 scrollTop 值是這個元素的頂部到它的最頂部可見內容（的頂部）的距離的度量。通俗來講就是滾動條滾動的距離。當一個元素的內容沒有產生垂直方向的滾動條，那麽它的 scrollTop 值為0。$(".in").scrollTop()。 //jq 。


　　　　所以，在上面的例子裏，scrollTop與scrollLeft都是點擊獲取的。滾動條滾動了多少，scrollTop與scrollLeft的值就為多少

　　 2）scrollWidth/scrollHeight：一個元素內容高度的度量，包括由於溢出導致的視圖中不可見內容，沒有垂直滾動條的情況下，scrollHeight值與元素視圖填充所有內容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。$(".in")[0].scrollWidth //js 通俗來講就是：

　　　　scrollHeight = clientHeight + 滾動條滾動到最底部的距離

　　　　　　　　　 = height（設置的高度） + padding + 滾動條滾動到最底部滾動的距離

　　　　 scrollWidth = clientWidth + 滾動條滾動到最右部的距離

　　　　　　　　　 = width（設置的寬度） + padding + 滾動條滾動到最右部滾動的距離

4.pageX/pageY：

　　這兩個屬性是鼠標指針的位置，相對於文檔的左邊緣。通俗來講就是點擊的位置相對整個頁面的坐標。是jQuery事件。e.pageX

　　pageX：在上面的例子中，由於點擊的是in這個div的左上角，所以鼠標點擊的位置距離in這個div最左端為0，然後，in這個div又距離左部有40的位置。所以最終結果為40

　　 pageY同理

5.screenX/screenY

　　相對於用戶顯示器屏幕左上角的X,Y坐標。註意是當前顯示器屏幕，當前顯示器屏幕，當前顯示器屏幕哦。e.screenX

　　 所以這裏的screenX是40，因為，out這個div距離顯示器屏幕的左部為20，然後in這個div的margin為20，所以最終結果為40。

　　 由於不清楚body距離顯示屏屏幕最上端的距離是多少，所以不能口算出screenY的大小。

6.position().left/position().top

　　這兩個屬性是jQuery的css操作方法。返回匹配元素相對於父元素的位置（偏移），需設置了定位的元素。$(".in").position().left //jq

　　在上面的例子中，in這個div設置了“相對定位”，left和top值都為20，所以這裏的position().left和position().top的值都是20。如果in這個div不設置“相對定位”，那麽這兩個的值都為0

扒一扒offsetleft，srollleft，pagex，clientx，postion().left等精確位置的獲取與理解