秒懂clientHeight/clientWidth/clientLeft/clientTop

clientHeight/clientWidth/clientLeft/clientTop

元素的内部高度/宽度/左边border的宽度/上面border的宽度

一、概念

clientHeight/clientWidth:返回元素的高度/宽度，包含padding，不包含boder、margin和滚动条；

clientTop/clientLeft：元素的顶部边框/左边框的宽度，不包含外边距和内边距；

以上全部为只读属性，返回值是像素，单位是px。

二、计算方式：

以clientWidth为例（标准盒模型时）：

存在滚动条时：content width + padding -scollbarWidth

不存在滚动条时： content width + padding

注：如果当前元素是行内元素，clientLeft返回0

三、示例：

此案例中高出现了滚动条，宽没有出现滚动条。（有滚动条时默认减去滚动条的宽度）

红色线表示clientWidth的可视区，红色文字表示clientWidth的计算方式

绿色线表示clientHeigth的可视区，绿色文字表示clientHeight的计算方式

蓝色为clientTop和clientLeft的可以区及计算方式。

右侧 #box 为相关样式