scrollheight,clientheight,offsetheight的区别
说明：
scrollheight：dom元素的实际内容的高度，不包border的高度，会随dom元素中内容的增加(超过可视区后)而变大。
clientheight：dom元素内容可视区的高度，不包含滚动条和边框的高度。
offsetheight：dom元素整体的高度，包括滚动条和边框。
当滚动条不出现的时候
这时候dom元素中没有内容或者内容不超过可视区
scrollwidth=clientwidth，两者皆为可视区的宽度。
scrollheight=clientheight,两者皆为可视区的高度。
offsetwidth、offsetheight为dom元素的整体宽度和高度。
当滚动条出现的时候
这时候dom元素中没有内容或者内容不超过可视区
scrollwidth>clientwidth
scrollheight>clientheight
scrollwidth和scrollheight分别是实际内容的宽度和高度
clientwidth和clientheight分别是内容可视区的宽度和高度
offsetwidth、offsetheight为dom元素的整体宽度和高度。
demo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>正确理解和运用与尺寸大小相关的dom属性</title>
<style type="text/css">
html,body {margin: 0;}
body {padding: 100px;}
#box {
overflow: scroll;
width: 400px;
height: 300px;
padding: 20px;
border: 10px solid #000;
margin: 0 auto;
box-sizing: content-box;
/*
box-sizing:content-box表示元素的宽度与高度不包括内边距与边框的宽度和高度
box-sizing:border-box表示元素的宽度与高度包括内边距与边框的宽度和高度
*/
}
#box2 {
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="box">
<div id="box2">谷歌浏览器测试结果</div>
</div>
<script type="text/javascript">
//offsetwidth ，offsetheight对应的是盒模型的宽度和高度
//scrollwidth，与scrollheight对应的是滚动区域的宽度和高度，但是不包含滚动条的宽度！滚动区域由padding和content组成。
//clientwidth，clientheight对应的是盒模型除去边框后的那部分区域的宽度和高度，不包含滚动条的宽度
var boxe=document.getelementbyid("box");
var box=document.getelementbyid("box2");
//对于scrollwidth没有发生横向的溢出，同时由于overflow: scroll的原因，scrollwidth 跟clientwidth相同，但是没有包含滚动条的宽度
console.log('scrollwidth:' + boxe.scrollwidth);//423
console.log('scrollheight:' + boxe.scrollheight);//672
//clientwidth与clientheight分别等于offsetwidth与offsetheight减掉相应边框（上下共20px，左右共20px）和滚动条宽度后的值（chrome下滚动条宽度为17px）；
console.log('clientwidth:' + boxe.clientwidth);//423=460-20-17
console.log('clientheight:' + boxe.clientheight);//323=360-20-17
//offsetwidth与offsetheight与chrome审查元素看到的尺寸完全一致
console.log('offsetwidth :' + boxe.offsetwidth);//460=width+padding+border
console.log('offsetheight:' + boxe.offsetheight);//360=height+padding+border
</script>
</body>
</html>
利用js获取dom元素的大小
获取html根元素：document.documentelement
获取body元素：document.body
获取页面可视区的宽度和高度，不包括滚动条
ie、ff、chrome中采用：
使用document.documentelement.clientwidth和document.documentelement.clientheight
注意：ie6标准模式下，上述方式可以
在混杂模式下：
ie6使用document.body.clientwidth和document.body.clientheight
注意： window.innerwidth/height是包括滚动条的宽度和高度的。这也与document.documentelement.clientwidth/height的区别所在。
所以在使用的时候注意兼容写法：
demo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面视口宽高</title>
</head>
<body>
<script type="text/javascript">
//标准模式
var w=document.documentelement.clientwidth;
var h=document.documentelement.clientheight;
console.log('w宽：'+w+'---'+'h高：'+h);
//混杂模式
var width=document.body.clientwidth;
var height=document.body.clientheight;
//兼容写法
var ww=document.documentelement.clientwidth||document.body.clientwidth;
var hh=document.documentelement.clientheight||document.body.clientheight;
console.log('ww宽：'+ww+'---'+'hh高：'+hh);
</script>
</body>
</html>
获取一个普通html元素的大小
doce.offsetwidth;
doce.offsetheight;
获取滚动条滚动高度（兼容性处理）
var otop=document.documentelement.scrolltop||document.body.scrolltop;
offsetwidth与offsetheight
这两个属性表示元素的可视区的宽度和高度，这个值包括元素的边框(border)，水平padding，垂直滚动条宽度或者高度，元素本身宽度或者高度等。
offsetwidth与offsetheight这两个属性的值只与该元素有关，与周围元素（父级和子级元素无关）。
offsetwidth=(border-width)*2+(padding-left)+(width)+(padding-right)
offsetheight=(border-width)*2+(padding-top)+(height)+(padding-bottom)
offsetleft与offsettop
offsetleft与offsettop这两个属性值与offsetparent有关。
offsetparent属性返回一个对象的引用，这个对象是距离调用offsetparent的元素最近的（在包含层次中最靠近的），并且是已进行过css定位的容器元素。 如果这个容器元素未进行css定位, 则offsetparent属性的取值为根元素(即body元素)的引用。
两条规则：
如果当前元素的父级元素没有进行css定位（position为absolute或relative），offsetparent为body。
如果当前元素的父级元素中有css定位（position为absolute或relative），offsetparent取最近的那个父级元素。
offsetleft：对象元素边界的左上角顶点相对于offsetparent的左上角顶点的水平偏移量；
offsettop：对象元素边界的左上角顶点相对于offsetparent的左上角顶点的垂直偏移量；
offsetleft=(offsetparent的padding-left)+(中间元素的offsetwidth)+(当前元素的margin-left)
offsettop=(offsetparent的padding-top)+(中间元素的offsetheight)+(当前元素的margin-top)
当offsetparent为body时情况比较特殊:
在ie8/9/10及chrome中：
offsetleft = (body的margin-left)+(body的border-width)+(body的padding-left)+(当前元素的margin-left)。
在firefox中：
offsetleft = (body的margin-left)+(body的padding-left)+(当前元素的margin-left)