JS盒子模型

JS盒子模型提供的属性都是当前元素的私有属性

client系列:

clientHeight/clientWidth/clientTop/clientLeft

• clientWidth/clientHeight:内容宽度(高度)+左右(上下)padding的值
• clientTop/clientLeft:上边框的高度(左边框的宽度)

内容是否有益处对于最后的结果是没有任何的影响的

offset系列:

offsetHeight | offsetWidth | offsetTop | offsetLeft | offsetParent

• offsetParent:父级参照物（在同一个水平面上的最外层的元素就是所有元素的父级参照物）
• offsetWidth/offsetHeight:clientWidth(clientHeight)+左右(上下)的边框
• offsetLeft 前元素的外边框距离父级参照物的内边框的左偏移量
  内容是否有益处对于最后的结果是没有任何的影响的

scroll系列:

scrollHeight/scrollWidth/scrollTop/scrollLeft

• scrollWidth/scrollHeight:在没有内容溢出的情况下和我们的clientWidth(clientHeight)一模一样
• scrollHeight:在有内容溢出的情况下,我们获取到的值”约等于”:真实内容的高度+上padding(为什么说是约等于呢？因为同一个浏览器,有没有加overflow: hidden;对最后的结果会有影响，还有不同的浏览器获取到的值是不一样的)
• scrollLeft/scrollTop:滚动条卷去的宽度/高度（滑屏的时候需要用）

获取当前浏览器可视窗口(一屏幕)的宽度和高度

document.documentElement.clientWidth
document.documentElement.clientHeight

获取整个网页的实际宽度和高度

document.documentElement.scrollWidth
document.documentElement.scrollHeight

兼容所有的浏览器,必须要写两套获取方式:

 document.documentElement.scrollHeight||document.body.scrollHeight

总结

上面的JS盒子模型属性都是“只读的”：只能获取值，但是不能修改值,获取的值为小数的时候，会自动四舍五入

scrollLeft/scrollTop:滚动条卷曲的高度/宽度

这两个属性既可以获取到值，也可以修改他们的值，这两个属性是“可读写的”

• 最小值为0
• 最大值为box.scrollHeight（真实的高度，包含溢出内容）-box.clientHeight(一屏幕的高度)

获取当前浏览器的类型(版本信息)

window.navigator.userAgent