client
clientHeight
這個屬性是只讀屬性牍鞠，對于沒有定義CSS或者內(nèi)聯(lián)布局盒子的元素為0咖摹，否則，它是元素內(nèi)部的高度(單位像素)难述，包含內(nèi)邊距萤晴，但不包括水平滾動條、邊框和外邊距胁后。
clientHeight 可以通過 CSS height + CSS padding - 水平滾動條高度 (如果存在)來計算店读。滾動條區(qū)域不能顯示內(nèi)容所以扣除。
盒子模型如下：
clientWidth
這個屬性是只讀屬性择同，對于沒有定義CSS或者內(nèi)聯(lián)布局盒子的元素為0两入，否則净宵，它是元素內(nèi)部的高度(單位像素)敲才，包含內(nèi)邊距，但不包括水平滾動條择葡、邊框和外邊距紧武。
clientHeight 可以通過 CSS height + CSS padding - 水平滾動條高度 (如果存在)來計算.
clientTop
一個元素頂部邊框的寬度（以像素表示）。不包括頂部外邊距(margin,outline,box-shadow)或內(nèi)邊距(padding)及是border敏储。clientTop 是只讀的阻星。
clientLeft
表示一個元素的左邊框的寬度，以像素表示已添。如果元素的文本方向是從右向左（RTL, right-to-left, direction: rtl）妥箕，并且由于內(nèi)容溢出導致左邊出現(xiàn)了一個垂直滾動條，則該屬性包括滾動條的寬度更舞。clientLeft 不包括左外邊距和左內(nèi)邊距畦幢。clientLeft 是只讀的。
其中滾動條的寬度為16px; clientLeft = border + scrollbarWidth;
當沒有滾動條的時候計算方式和clientTop;
offset
offsetHeight
HTMLElement.offsetHeight 是一個只讀屬性缆蝉，它返回該元素的像素高度宇葱，高度包含該元素的垂直內(nèi)邊距和邊框瘦真，且是一個整數(shù)。
通常黍瞧，元素的offsetHeight是一種元素CSS高度的衡量標準诸尽，包括元素的邊框、內(nèi)邊距和元素的水平滾動條（如果存在且渲染的話）印颤，不包含:before或:after等偽類元素的高度您机。
對于文檔的body對象，它包括代替元素的CSS高度線性總含量高年局。浮動元素的向下延伸內(nèi)容高度是被忽略的往产。
offsetHeight = border * 2 + padding * 2 + contentHeight + scrollbarWidth
offsetWidth
HTMLElement.offsetWidth 是一個只讀屬性，返回一個元素的布局寬度某宪。一個典型的（譯者注：各瀏覽器的offsetWidth可能有所不同）offsetWidth是測量包含元素的邊框(border)仿村、水平線上的內(nèi)邊距(padding)、豎直方向滾動條(scrollbar)（如果存在的話）兴喂、以及CSS設置的寬度(width)的值蔼囊。
offsetWidth = border * 2 + padding * 2 + contentWidth + scrollbarWidth
offsetTop
HTMLElement.offsetTop為只讀屬性，它返回當前元素相對于其offsetParent元素的頂部的距離衣迷。
對應css如下:
在該示例中 offsetTop = marginTop + top(100px)
offsetLeft
HTMLElement.offsetLeft 是一個只讀屬性畏鼓，返回當前元素左上角相對于 HTMLElement.offsetParent 節(jié)點的左邊界偏移的像素值。
對塊級元素來說壶谒，offsetTop云矫、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相對于 offsetParent 的邊界框汗菜。
然而让禀，對于可被截斷到下一行的行內(nèi)元素（如 span），offsetTop 和 offsetLeft 描述的是第一個邊界框的位置（使用 Element.getClientRects() 來獲取其寬度和高度）陨界，而 offsetWidth 和 offsetHeight 描述的是邊界框的尺寸（使用 Element.getBoundingClientRect 來獲取其位置）巡揍。因此，使用 offsetLeft菌瘪、offsetTop腮敌、offsetWidth、offsetHeight 來對應 left俏扩、top糜工、width 和 height 的一個盒子將不會是文本容器 span 的盒子邊界。
在該示例中 offsetLeft = marginleft + left(100px)
scroll
scrollHeight
Element.scrollHeight 這個只讀屬性是一個元素內(nèi)容高度的度量录淡，包括由于溢出導致的視圖中不可見內(nèi)容捌木。
scrollHeight 的值等于該元素在不使用滾動條的情況下為了適應視口中所用內(nèi)容所需的最小高度。 沒有垂直滾動條的情況下赁咙，scrollHeight值與元素視圖填充所有內(nèi)容所需要的最小值clientHeight相同钮莲。包括元素的padding免钻，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after這樣的偽元素崔拥。
代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試scrollHeight</title>
<style>
html,body,.parent{
margin: 0;
}
.parent{
height: 800px;
width: 600px;
padding: 20px;
border: 1px solid red;
overflow: auto;
margin: 10px;
}
.parent::before{
height: 100px;
width: 100%;
content: "before";
background-color: #00a6e2;
color: #fff;
display: inline-block;
}
.parent::after{
height: 100px;
width: 100%;
content: "after";
background-color: #00a6e2;
color: #fff;
display: inline-block;
}
.box1{
width: 100%;
height: 900px;
border: 10px solid red;
padding: 20px;
margin: 30px;
}
.parent::-webkit-scrollbar{
width:16px;
height:16px;
background-color: #00a6e2;
}
.parent::-webkit-scrollbar-thumb
{
border-radius:10px;
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
background-color:#555;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1"></div>
</div>
</body>
</html>
我們先看看box1的scrollHeight
其中box1的scrollHeight為940极舔，因為沒有滾動條scrollHeight = clientHeight = padding * 2 + contentHeight。
我們再看看parent的scrollHeight
scrollHeight = parent的padding(20 * 2) + 二個偽元素高度(200) + box1的高度(900 + 20 * 2 + 10 * 2 + 30 * 2) = 1260
scrollWidth
Element.scrollWidth 是只讀屬性链瓦，表示元素內(nèi)容的寬度拆魏，包括由于滾動而未顯示在屏幕中內(nèi)容
scrollWidth值等于元素在不使用水平滾動條的情況下適合視口中的所有內(nèi)容所需的最小寬度。 寬度的測量方式與clientWidth相同：它包含元素的內(nèi)邊距慈俯，但不包括邊框渤刃，外邊距或垂直滾動條（如果存在）。 它還可以包括偽元素的寬度贴膘，例如::before或::after卖子。 如果元素的內(nèi)容可以適合而不需要水平滾動條，則其scrollWidth等于clientWidth
當子元素的寬度超出父級元素的寬度的時候刑峡，子元素的margin-right丟失洋闽。所以不計算marginRight的寬度。
scrollWidth = parent.paddingLeft + (box1.padding + box1.border) * 2 + box1.contentWidth + box1.marginLeft
scrollTop
Element.scrollTop 屬性可以獲取或設置一個元素的內(nèi)容垂直滾動的像素數(shù)突梦。
一個元素的 scrollTop 值是這個元素的頂部到視口可見內(nèi)容（的頂部）的距離的度量诫舅。當一個元素的內(nèi)容沒有產(chǎn)生垂直方向的滾動條，那么它的 scrollTop 值為0宫患。
- 如果一個元素不能被滾動（例如刊懈，它沒有溢出，或者這個元素有一個"non-scrollable"屬性）娃闲， scrollTop將被設置為0虚汛。
- 設置scrollTop的值小于0，scrollTop 被設為0
- 如果設置了超出這個容器可滾動的值, scrollTop 會被設為最大值.
可以設置元素的scrollTop為負數(shù), 滾動到頂部畜吊。設置scrollTop一個超大值滾動到底部泽疆。
scrollTop的最大值 = scrollHeight - clientHeight 可以用該表達式判斷元素是否滾動到底部。
scrollLeft
Element.scrollLeft 屬性可以讀取或設置元素滾動條到元素左邊的距離玲献。
通scrollTop相似。
- 如果元素不能滾動（比如：元素沒有溢出）梯浪，那么scrollLeft 的值是0捌年。
- 如果給scrollLeft 設置的值小于0，那么scrollLeft 的值將變?yōu)?挂洛。
- 如果給scrollLeft 設置的值大于元素內(nèi)容最大寬度礼预，那么scrollLeft 的值將被設為元素最大寬度。
可以設置元素的scrollLeft為負數(shù), 滾動到左側(cè)虏劲。設置scrollLeft一個超大值滾動到右側(cè)托酸。
