js中相关的宽度
屏幕（显示器分辨率）宽度高度
screen.width
screen.height
除去电脑任务栏后的屏幕宽度高度
screen.availWidth
screen.availHeight
浏览器窗口的内部宽度高度(包括滚动条)
window.innerHeight
window.innerWidth
clientWidth和clientHeigh 、 clientTop和clientLeft
1、clientWidth的实际宽度clientWidth = width+左右padding
2，clientHeigh的实际高度clientHeigh = height + 上下padding
3，clientTop的实际宽度 clientTop = boder.top(上边框的宽度)
4，clientLeft的实际宽度clientLeft = boder.left(左边框的宽度)
scrollWidth和scrollHeight 、 scrollTop和scrollLeft
1， scrollWidth：内容+内边距+溢出尺寸-----不包括边框和外边距 ==实际内容
2， scrollHeight：内容+内边距+溢出尺寸-----不包括边框和外边距 ==实际内容
3， scrollTop :内容层顶部 到 可视区域顶部的距离。
4，scrollLeft:内容层左端 到 可视区域左端的距离.
offsetWidth和offsetHight 、 offsetTop和offsetLeft
不同浏览器的值不同，是否定位情况也不同
当父元素不设置posittion属性时是元素到浏览器之间的距离
当父元素设置定位后则是元素到父元素的距离
1,offsetWidth = width + 左右padding + 左右boder元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件
2,offsetHeith = height + 上下padding + 上下boder
3， offsetTop：当前元素 上边框 外边缘 到 最近的已定位父级（offsetParent） 上边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离
4，offsetLeft：当前元素 左边框 外边缘 到 最近的已定位父级（offsetParent） 左边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wh{
background-color: #000000;
height: 200px;
color: #FFFFFF;
}
#whw {
background-color: #00FFFF;
height: 200px;
}
#whwh {
background-color: #1E90FF;
height: 200px;
}
#yue {
height: 300px;
width: 300px;
padding: 1px;
border: solid #00FFFF 2px;
margin: 3px;
background-color: #5F9EA0;
}
</style>
</head>
<body>
<div id="wh"><p>screen.width、screen.height屏幕的宽度和高度(设备的物理像素即分辨率)</p></div>
<div id="whw"><p>screen.availWidth、screen.availHeight除去电脑任务栏后的屏幕宽度高度</p></div>
<div id="whwh"><p> 浏览器窗口的内部宽度高度(包括滚动条)</p></div>
<div id="yue"><p>元素相关宽度</p></div>
<script type="text/javascript">
var wh = document.getElementById('wh');
var whw = document.getElementById('whw');
var whwh = document.getElementById('whwh');
var yue = document.getElementById('yue');
var dingshi = setInterval(function(){
wh.style.width = screen.width +'px';
wh.style.height = screen.height + 'px' ;
console.log('width宽'+screen.width,'height高'+screen.height);
whw.style.width = screen.availWidth +'px';
whw.style.height = screen.availHeight + 'px' ;
console.log('availWidth宽'+screen.availWidth,'availHeight高'+screen.availHeight);
whwh.style.width = window.innerWidth +'px';
whwh.style.height = window.innerHeight + 'px' ;
console.log('innerWidth宽'+window.innerWidth,'innerHeight高'+window.innerHeight);
console.log('clientWidth:'+ yue.clientWidth,'clientHeight:'+ yue.clientHeight,'clientLeft:'+ yue.clientLeft,'clientTop:'+ yue.clientTop)
console.log('offsetWidth:'+yue.offsetWidth,'offsetHeight:'+yue.offsetHeight,'offsetLeft:'+yue.offsetLeft,'offsetTop:'+yue.offsetTop)
console.log('scrollWidth:'+yue.scrollWidth,'scrollHeight:'+yue.scrollHeight,'scrollLeft:'+yue.scrollLeft,'scrollTop:'+yue.scrollTop)
},5000);
setTimeout(function() {
clearInterval(dingshi)
console.log('计时器停止');
},50000)
</script>
</body>
</html>
