可视区高宽度和页面文档高宽度区分

1.可视区高宽度：浏览器展示内容的大小，会随浏览器边框调整而改变。
①获取：$(window).height(); $(window).width();

2.页面的文档高度：浏览器页面展示内容的高度，与浏览器外边框无关，只与内容有关，包括内容的宽度，margin，border等。
①获取：$(document).height(); $(document).width();

3.滚动条滚动距离（包括距离顶部和左边的垂直宽度）
①获取：$(document).scrollTop(); $(document).scrollLeft();

4.计算元素位置和偏移量,包括通过css获取(含单位px)和offset(纯number数值)获取
①$("#id").offset(); 会获得一个对象，包括top和left两个键值对。
②$("#id").offset().top; 获得其中top的值
③$("#id").offset().left; 获得其中left的值
④$("#idd").css("width"); 获得其中宽度，是带单位px的。

测试例子：

// 获取浏览器显示区域的高度 ： 
console.log("1.可视区窗口高度（调整窗口外框会改变，里面的内容无关）："+$(window).height()); 
// 获取浏览器显示区域的宽度 ：
console.log("2.可视区窗口宽度（调整窗口外框同样会改变）："+$(window).width()); 
// 获取页面的文档高度 ：
console.log("3.文档高度document （页面中填充物撑开的高度会包括物体高度，margin、border\padding) "+$(document).height()); 
// 获取页面的文档宽度 ：
console.log("4.文档宽度document "+$(document).width());		 
// 获取滚动条到顶部的垂直高度 ：		 
console.log("5.滚动条顶部的距离"+$(document).scrollTop()); 
// 获取滚动条到左边的垂直宽度 ：			 
console.log("6. 滚动条左边的距离"+$(document).scrollLeft());			 
// 计算元素位置和偏移量：	
console.log("7. 元素距离页面边框上下左右的距离：");
console.log($("#idd").offset());
console.log($("#idd").offset().top);
console.log($("#idd").css("width"));
// offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。

测试结果：----------------------------

—clientX:返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
clientY:与上类似，是垂直方向鼠标对于浏览器页面的距离。

----document.documentElement.clientWidth:获取浏览器窗口文档显示区域的宽度，不包括滚动条。
document.documentElement.clientHeight: 与上类似

—document.documentElement.offsetWidth：获取DOM文档的根节点html元素对象的宽度，即offsetWidth=width+padding+border，不包括margin。
document.documentElement.offsetHeight：高度。

---