JavaScript及jQuery中的各种宽高属性图解
原文链接 http://blog.poetries.top/2016/12/13/js-props 声明：本文根据慕课网学习视频整理
强烈建议打开控制台自己动手练习一遍，这样印象才会深刻
# 第一部分 JavaScript中的宽高属性
# 一、与window相关的宽高属性
# 1.1 window.location和document.location
window对象的location属性引用的是location对象，表示该窗口中当前显示文档的URLdocument的对象的location属性也是引用location对象- 所以
window.location === document.location//true
# 1.2 window.screen
window.screen包含有关用户屏幕的信息。它包括：window.screen.widthwindow.screen.heightwindow.screen.availHeightwindow.screen.availWidthwindow.screenTopwindow.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 #
