对于JS的基础大多数人学习是没有问题的，再进一步的话就会越来越难，做到深入探讨，顺时网络科技就要去深入解析，就好比chrome

具体来说即：

1.clientWidth，clientHeight，clientLeft，clientTop；

2.offsetWidth，offsetHeight，offsetLeft，offsetTop；

3.scrollWidth，scrollHeight，scrollLeft，scrollTop；

4.height，width。

clientWidth

顾名思义，client，客户端。具体到某一个元素比如html，body或者a，p，img指的就是这个元素，而非常规理解的客户端诸如浏览器。

html标签：

当html各种属性为默认值时，内部是空的head及body元素，其clientWidth值即为视口宽度，比如我的电脑屏宽1366px，当缩放浏览器的时候，该值变成缩放后的宽度，而顺时网络科技当竖直滚动条出现的时候，需减去滚动条的宽度（竖直滚动条在高度大于可视屏幕高度时出现，可能是html或其子元素撑开的）。而移动端浏览器是不支持缩放的，因此在默认情况下，这个值就是内置的视口宽度，所谓视口宽度不是硬件屏宽，而是虚拟宽度，比如iphone6为980px，实际屏宽没这么大。

由于影响宽度的属性有width，margin，padding，border，outline。我们逐一来看，当设置html有width，margin，padding，border，outline任意一个或累加的时候，clientWidth不受影响。也即html的clientWidth只与客户端内置视口宽及用户缩放行为有关。

如果内部元素body非默认值，而是设定width，margin，padding，border，outline任意一个或累加的时候，我们看看html的clientWidth的表现，经测试，无论设置多少不会对html的clientWidth造成影响，验证了该值只与客户顺时网络科技端内置视口宽及用户缩放行为有关的结论。

如果出现右侧滚动条，一般是当元素高大于浏览器可见部分高时出现，该值需要减去滚动条的宽度，即16px。

以上测试使用的chrome浏览器，其他浏览器可能会有区别。总的一句话，html标签该值只与客户端内置视口宽及用户缩放行为有关。

body标签：

当body标签各种属性为默认值时，内部为空，父元素html为默认属性。其clientWidth值跟html一样，即受客户顺时网络科技端内置视口宽及缩放行为影响，如果出现滚动条，则需减去滚动条的宽度16px，而且body默认左右各8px的margin。

tips：body最大clientWidth为33554430px。

而若在其父元素，子元素各项属性值保持默认的情况下，body设置以上width等5项值，会出现什么情况呢？当设置了宽，该值变为宽，当设置了padding，该值变为宽+padding，也即设置本身本身就具有了优先级，而设置另外三项则不受影响。这个宽度是不受限制的，小可到0，大可到无穷，当然这个无法验证，数值太大，浏览器会崩溃。

而若本身保持默认值，父元素html进行5项值测试，设置宽，结果变成该宽值减去滚动条宽度16px，即便没出现滚动条也是如此。而设置其他值不受影响。也即body的clientWidth是受父元素html的宽影响的，其他值不对该值造成影响。

若本身及父元素保持默认值，子元素变动5项值的时候，该值不受影响。

经以上验证，body的该值只受本身的宽+padding及父元素html宽的影响，本身值更具优先级，也即一旦设置本身宽+padding，父元素的宽失效。

p标签（block元素）：

当父元素，子元素及本身都为默认值时，该值需要减去父元素body默认的margin左右各8px，当出现滚动条还需减去滚动条的宽度。实际等同于父元素的宽，如果顺时网络科技自身有border还需减去。

当父子元素默认，本身设置以上5值，除本身宽+padding外，其他值不影响，也即clientWidth值等于本身宽加上本身左右padding。该结论跟body一样。

当本身及子元素默认，父元素设置5项，该值表现跟body一样，即该值成为父元素宽度，其他四项不造成影响。

当本身及父元素为默认，子元素设置5项，该值恢复到各项都为默认值的时候，即屏宽减去左右padding各8px。

由此可见，block元素的clientWidth也只受本身宽+padding及父元素宽的影响，如果包括父元素往上追踪皆未设置宽度，则会一直追到根元素html的默认值，在PC是客户端可见宽，在移动端是内置视口宽。而若设置了本身宽，padding，或宽+padding，则该值即是这些值，弃用父元素及往上继承的宽度。

video（inline-block元素）：

当父子及本身为默认时，该值为0。

当父子为默认，本身设置5值，该值为本身宽+padding。

当本身及子为默认值，父设置5值，该值为0，也即不受父元素宽度影响，这是跟block元素相区别的地方。

当本身及父元素为默认值，子元素设置5值，此类情况对于自闭合标签不适用。该值恢复默认值，也即该元素内置的宽+padding。

因此对于inline-block元素来说，其clientWidth只受本身宽+padding的影响，不受其他影响。

a（inline元素）：

当父子及本身为默认时，该值为0。

当父子为默认，本身设置5值，该值为0。

当本身及子为默认，父为5值，该值为0。

当本身及父为默认，子为5值，该值为0。

一句话，对于inline元素来说，clientWidth这个值始终为0，即便内有文本元素也为0。

总而言之，根元素html只受默认视口及用户行为影响；block元素，包括body及其他块clientWidth受自身宽+padding及父元素宽的影响，且以自身为优先；inline-block只受自身宽+padding影响；inline不受任何影响，始终为0。再总结下，clientWidth实际就是自身所有的宽+padding。内联元素皆无，内联块和块级元素二者之和。行了，就这样吧，差不多了，影响的因素有很多，比如inline对其的影响和padding对其的影响。