android垂直排列元素_元素的视图属性之client

总结：

clientLeft = border-left
如果有滚动条，clientLeft = border-left+ 滚动条宽度
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]

<body><div class="parent">  <div class="child">我们我们我们</div></div>
</body>

*{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 + '<br>'
}
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的盒子模型

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