之前的项目刚写了一个判断在触底时自动加载更多功能，发现各种宽高的定义还是很模糊。最后还是没偷懒，自己写了一个demo来了解一下。网上也有很多有组织的文章。为了加强自己的记忆，或许可以顺便提一些建议。元素的一些宽高属性注：盒模型：content+padding+margin+borderelement.clientWidth=content+左右paddingelement.clientHeight=content+upanddownpadding//元素的content部分+对应的padding（左右右/上和下）；当外层元素有滚动条时，该值不包括滚动条的宽度//如果块元素没有设置宽度，则默认继承外层元素的宽度=>因此，targetelement=外层元素是否有滚动条？(外层元素宽度-滚动条宽度-元素左右边框-元素左右外边距)：(外层元素宽度-元素左右边框-元素左右外边距)；如果没有设置高度，padding也为0；即使外层元素的高度再大一点，目标元素的clientHeight依然为0=content+topandbottompadding//和元素的clientWidth相同element.scrollLeft=超出浏览器的部分最左边到浏览器最左边的距离（即部分的长度wherethedocumentrolloutofthebrowser)element.scrollTop=thetopsideofthepartbeyondthebrowsertothebrowser顶边的距离（即文档滚出浏览器的高度）element.scrollWidth=content+leftandrightpaddingelement.scrollHeight=content+upanddownpadding//与元素的clientWidth相同element.offsetWidth=content+leftandrightpadding+leftandrightborderelement.offsetTop=content+upanddownpadding+upanddownborderelement.offsetLeft=distancefromthefarleftofelement(从border外开始)外层元素element.of的距离fsetTop=distancefromthetopoftheelement(从border外开始)外层元素的距离//这个值是固定的，不会随着滚动改变注意：当ie/chrome/firefox获取到body的scrollTop和scrollLeft时，直接使用document.body.scrollTop得到的值都是0；更改为document.documentElement.scrollTop；或者使用window.pageXOffset，这个属性会更兼容，ie8及以上，firefox，chrome都支持window的一些宽高属性window.innerWidth=浏览器可见区域的宽度（包括scrollbar)window.outerWidth=浏览器可见区域的宽度（包括滚动条的宽度）//测试chrome/firefox上window的innerWidth和outerWidth是否相同//**即测试结果有点疑惑，我们需要再次检查并添加**地址栏和工具栏）距离屏幕可见区域最上边的距离//chrome测试结果，主屏幕上的结果：screenLeft:0;屏幕顶部：0；//但是在外接显示器上打开浏览器有问题；外接显示器的距离最左边的距离不是从0开始而是从主屏可见区域的宽度开始，所以此时screenLeft的值就是主屏的宽度；screenTop也有区别；外接显示器也应以主屏边框为准。参考//firefox在ie中不支持这两个属性//;screenTop的最小值不是0，而是顶部地址栏和toolbar的高度window.screenX=浏览窗口到屏幕可见区域最左边的距离window.screenY=浏览窗口（包括顶部地址栏和工具栏）到可见区域最上边的距离ofthescreen//chrome的测试结果：和screenLeft/screenTop的测试结果一致//firefox的测试结果：和chrome的screenLeft/screenTop的结果一样//即测试结果都是：-8？？有点奇怪window.pageXOffset=浏览器部分最左边到浏览器最左边的距离（也就是文档滚出浏览器的那部分的长度）window.pageYOffset=topsideofthebrowserparttothetopsideofthebrowser的距离（即文档从浏览器中滚出的部分的高度）//在chrome/firefox/ie上测试；结果与scrollTop/scrollLeft的值相等且等效；兼容性优于scrollTop/scrollLeftscreen的宽/高screen.width=屏幕宽度（宽分辨率）screen.height=屏幕高度（高分辨率）//在chrome/firefox/ie上测试；结果是相等的，屏幕的分辨率与浏览器窗口的大小无关/ieavailHeight与电脑窗口顶部导航栏和底部导航栏的高度有关（注意不是浏览器里面的导航栏）//availWidth与左侧导航/工具栏的高度有关以及电脑窗口的右导航/工具栏（注意不是浏览器里面的导航栏）点击事件的事件对象中的一些宽高e.clientX=当前鼠标到最左边的距离browsere.clientY=当前鼠标到浏览器顶部的距离（不包括工具栏和地址栏）//origin:(0,0)//chrome/firefox/即结果一致，和的结果主屏和外屏也一样e.screenX=当前鼠标到浏览器最左边的距离e.screenY=当前鼠标到浏览器最上端（包括工具栏和地址栏）的距离//origin:(0,浏览器工具栏+地址栏高度+屏幕顶部导航/工具栏高度(如果有的话))//chrome/firefox/iein所有在主屏幕上=clientX;在外接显示中，由于主屏幕的影响存在偏差e.offsetX=当前鼠标到当前元素最左边的距离e.offsetY=当前鼠标到最上边的距离当前元素//chrome/firefox/ie的结果是一样的，主屏和外屏的结果也是一样的=当前鼠标到浏览器最左边的距离e.y=距离当前鼠标到浏览器的顶部（不包括工具栏和地址栏）一般来说（没有外屏）e.clientX=e.screenX=e.x=e.pageX;e.clientY=e.screenY=e.Y=e.pageY懒得写在最后了。各种浏览器对某些属性的支持不同，结果也不同。以前框架用的太多了，公司这边对兼容性要求不高，所以写法很少，也很少关注兼容性问题；虽然大部分的属性可能暂时用不到，但是说清楚还是不错的，ie等的一些测试，我用同事的电脑测试了一下，然后回去改了。好吧，就是这样；过程中还是有很大收获的！
