offset系列
offsetParent(html和body之間的空隙被消除掉)
- 本身定位為fixed
- offsetParent：null(除了火狐)
- offsetParent：body(火狐)
offsetLeft和offsetTop 都是參照于body的Ｉ陌酢！！
- 本身定位不為fixed
- offsetParent：body(父級沒有定位)
- offsetParent：定位父級(父級沒有定位)
offsetTop
- 只讀屬性鸵隧，它返回當(dāng)前元素相對于其 offsetParent 元素的頂部的距離
offsetLeft
- 只讀屬性础废，返回當(dāng)前元素左上角相對于offsetParent 節(jié)點(diǎn)的左邊界偏移的像素值（可以稱為一個(gè)元素的物理或圖形尺寸或者<border-box>）
offsetWidth
- 返回一個(gè)元素的布局寬度,高度包含該元素的垂直內(nèi)邊距和邊框神凑，且是一個(gè)整數(shù)
Elemetn.offsetHeight
- 返回一個(gè)元素的布局高度,高度包含該元素的垂直內(nèi)邊距和邊框象浑，且是一個(gè)整數(shù)（可以稱為一個(gè)元素的物理或圖形尺寸或者<border-box>）
對塊級元素來說旭等，offsetTop窖铡、offsetLeft疗锐、offsetWidth 及 offsetHeight 描述了元素相對于 offsetParent 的邊界框。
getBoundingClientRect()系列
方法返回元素的大小及其相對于視口的4個(gè)位置
height&width
- 返回元素的高度&寬度
與offsetWidth/offsetHeight比較
getBoundingClientRect().width/height 返回的是一個(gè)浮點(diǎn)數(shù)值
offsetWidth返回的值是經(jīng)過round(四舍五入)的整數(shù)
left&top:
- 返回元素左邊到視口左邊頂部的距離
- 返回元素頂部到視口頂部的距離
當(dāng)滾動(dòng)位置發(fā)生了改變费彼，top和left屬性值就會(huì)隨之立即發(fā)生變化（因此窒悔，它們的值是相對于視口的，而不是絕對的）
right
- 返回元素右邊到視口左邊的距離
bottom
- 返回元素底部到視口頂部的距離
圖解
圖解.png
xxx.Width系列
offsetWidth
- 返回一個(gè)元素的布局寬度,高度包含該元素的垂直內(nèi)邊距和邊框敌买，且是一個(gè)整數(shù)(border-box)
clientWidth
- 表示元素的內(nèi)部寬度简珠，以像素計(jì)。該屬性包括內(nèi)邊距虹钮，但不包括垂直滾動(dòng)條（如果有）聋庵、邊框和外邊距。(padding-box)
scrollWidth
- 只讀屬性芙粱，表示元素內(nèi)容的寬度祭玉，包括由于滾動(dòng)而未顯示在屏幕中內(nèi)容(padding-box)
- 如果元素的內(nèi)容可以適合而不需要水平滾動(dòng)條，則其scrollWidth等于clientWidth
scroll相關(guān)
scrollTop
- 可以獲取或設(shè)置一個(gè)元素的內(nèi)容垂直滾動(dòng)的像素?cái)?shù)
document.documentElement.scrollTop 獲取系統(tǒng)滾動(dòng)條滑動(dòng)的距離
scrollLeft
- 讀取或設(shè)置元素滾動(dòng)條到元素左邊的距離
scrollWidth&scrollHeight
- 只讀屬性是一個(gè)元素內(nèi)容高度的度量春畔，包括由于溢出導(dǎo)致的視圖中不可見內(nèi)容脱货。
- 只讀屬性是一個(gè)元素內(nèi)容高度的度量，包括由于溢出導(dǎo)致的視圖中不可見內(nèi)容律姨。
在內(nèi)容不溢出的情況下scrollWidth/scrollHeightclientWidth/clientHeight獲取的都是padding-box的寬度/高度
