总结：

1. clientLeft = border-left
2. 如果有滚动条，clientLeft = border-left+ 滚动条宽度
3. clientWidth = content-width(内容实占宽度，如果有滚动条，则不应计算在内)+padding

clientLeft和clientTop

1.

clientLeft表示内容区域的左上角相对于整个元素左上角的位置（不包括padding、margin）,也就是一个元素的

左边框（border-left）的宽度。

2. 特别的：

如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。

3. clientTop的计算方法和clientLeft相似。

clientWidth和clientHeight

Element.clientWidth 属性表示元素的

内部宽度，以像素计。该属性

包括内边距(padding)，但

不包括垂直滚动条（如果有）、边框(border)和外边距(margin)。

该属性值会被四舍五入为一个整数。如果你需要一个小数值，可使用

element.getBoundingClientRect()。

实验 [clientLeft + clientWidth]

 
     
     
      
       我们我们我们
      
 
     

*{
      margin:0;  padding:0;}.parent{
      border:2px solid red;  width:100px;  height:100px;  padding:10px;  position:relative;}.child{
      position:absolute;  width:50px;  height:50px;  top:10px;  left:20px;  border:6px solid green;  margin:1px;}

let p = document.createElement('p')window.console.log = (content)=>{
      p.innerHTML += content + '
'}document.body.append(p)let child = document.querySelector('.child')console.log('child.clientTop = ' + child.clientTop)console.log('child.clientLeft = '+ child.clientLeft)console.log('child.clientWidth = '　＋　child.clientWidth)

1. clientWidth

这时div.child的width设置为50像素，没有padding值，所以clientWidth的值为50。如果这时添加padding呢？

padding:2px;

这时候50像素的内容宽度加上左右两像素的padding，clientWidth就变成54了。如果说有垂直方向上的滚动条呢？

overflow-y:scroll;

37怎么来的呢？来看看div.child的盒子模型

这时div.child的内容宽度为33,再加上左右padding值，就等于37.这就是clientWidth不包含垂直滚动条的意思。

2. clientLeft

可以看到clientLeft的值为6，这也就是border的值。 如果说div.child的排列方向为从右到左，并且存在垂直滚动条呢？

direction:rtl;    overflow-y:scroll;

来看看这时打印的结果。

这时clientLeft的值为23像素。本来border的值为6，那么剩下的17像素是什么呢？应该就是滚动条的宽度了。如果猜想没有，此时内容区域的宽度应该只有 50 - 17 = 33 。来看看div.child的盒子模型。

猜想正确，得到验证。果然此时div.child的内容去宽度只有33像素了。因为其他的17像素被滚动条占据了。