浏览器那些让人头疼的宽高

　　当你看到 screen.width/height、window.innerWidth/innerHeight、window.pageXOffset/pageYOffset、document.documentElement.clientHeight/clientWidth 等，你是否已经眼花了。不管你是不是眼花，我反正不仅眼花，脑子也短路了。下面我们一起来研究一下他们到底指的是哪个width和height。

　　注：一下全是在 chrome 浏览器下测试

　　1. screen （window.screen）

　　　　包含有关用户屏幕的信息 , window 可忽略不写, 所以 screen.width/height 表示用户屏幕的宽高

　　2. window　

　　　　表示浏览器窗口。

　　　　window.innerWidth/innerHeight　表示当前浏览器的文档区域的宽高(不包括工具栏)

　　　　window.outerWidth/outerHeight　表示当前浏览器的整个宽高(包括工具栏)

　　　　window.screenTop / screenLeft　　　表示浏览器离屏幕的距离　　　　

　　　　window.pageXOffset/pageYOffset　　表示文档水平和垂直位移距离

<!DOCTYPE html>
<html>
<head>
<title>test viewport</title>
<meta name="viewport" content="" >
<style type="text/css">
#main {
height: 2000px;
200px;
/*height: 200px;*/
padding: 2px;
margin: 3px;
border: 1px solid #eee;
background-color: #f0f0f0;
}
img {
margin-top: 50px;
}
</style>
</head>
<body>
<div id="main">
test
<img class="img" src="./test.png">
</div>
</body>
</html>

　　3. document　　　　

　　　　　表示html文档对象

　　　　　clientWidth 与 cilentHeight　表示元素的宽和高，包括内边距，不包括边框和外边距滚动条，它属于每个文档元素的方法

　　　　 offsetWidth 与 offsetHeight 与clientWidth 区别就是包含 border边框

　　　　总结：

　　　　　　后续继续补充，欢迎大家补充提出错误，谢谢