强烈建议打开控制台自己动手练习一遍，这样印象才会深刻

# 第一部分 JavaScript中的宽高属性

# 一、与window相关的宽高属性

# 1.1 window.location和document.location

• window对象的location属性引用的是location对象，表示该窗口中当前显示文档的URL
• document的对象的location属性也是引用location对象
• 所以 window.location === document.location //true

# 1.2 window.screen

• window.screen包含有关用户屏幕的信息。它包括：
  • window.screen.width
  • window.screen.height
  • window.screen.availHeight
  • window.screen.availWidth
  • window.screenTop
  • window.screenLeft

1.3 与window相关的宽高

• window.innerWidth 内部的宽度
• window.innerHeight 内部的高度
• window.outWidth 外部的宽度
• window.outHeight 外部的高度

# 二、与document相关的宽高属性

# 2.1与client相关的宽高

• document.body.clientWidth 元素宽度（可视内容区+内边距）
• document.body.clientHeight元素高度（可视内容区+内边距）

该属性指的是元素的可视部分宽度和高度，即padding+content 如果没有滚动条，即为元素设定的宽度和高度 如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高

example1：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 
console.log(document.body.clientWidth);  // 350+padding(80) = 430
console.log(document.body.clientHeight);  // 500 + padding(80) = 580

example2: 在div中添加文字， 指导出现滚动条

#exp2 {
	width:200px;
	height:200px;
	background:red;
	border:1px solid #000;
	overflow:auto;
}

var test = document.getElementById("exp2");

console,log(test.clientHeight); // 200
console.log(test.clientWidth); //