不一样的元素大小

@(C-工作问题)

元素的大小

在讲到offsetheight，clientheight，scrollheight的时候老是搞混，傻傻的分不清楚，在看完高程设计之后终于明白了其中的区别

偏移量

偏移量：包括元素在屏幕上占用的所有可见的空间，元素的可见大小是由其高度，宽度决定，包括所有的内边距，滚动条和边框大小（不包括外边距margin）
offsetHeight:元素在垂直方向上所占用的空间大小，以像素计，包括元素的高度（可见的） 水平滚动条的高度，上边框的高度和下边框的高度
offsetWidth：元素在水平方向所占用的空间大小，以像素计，包括元素的宽度（可见的） 垂直滚动条的宽度，左边框宽度和有边框宽度，
offsetLeft：元素的左外边框值包含元素的左内边框之间的像素距离
offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离
其中offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中，offsetParent属性不一定与parentNode的值相等，例如<td>元素的offsetParent是作为其祖先元素的<table>元素
要想知道元素在页面的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，如此循环值根元素，就可以得到一个基本准确的值

客户区大小

元素的客户区大小，指的是元素内容及其内边距所占据的空间大小，有关客户区的大小的属性有两个clientWidth和clientHeight其中clientWidth属性是元素内容区宽度加上左右内边距宽度，clientHeight属性是元素内容区加上上下内边距高度 都是不包括滚动条的

滚动大小

滚动大小：指的是包含滚动内容的元素的大小，
scrollHeight ：在没有滚动条的情况下，元素内容的总高度
scrollWidth：在没有滚动条的情况下，元素内容的总宽度
scrollLeft：被隐藏在内容区域左侧的像素数，通过设置这个属性可以改变元素的滚动位置
scrollTop：被隐藏在内容区域上方的像素数，通过设置这个属性可以改变元素的滚动位置

最后来张总结图