JS盒子模型属性
基于一些属性和方法，让我们能够获取到元素的样式信息，例如：clientWidth、offsetWidth等
属性：
-
client
- width / height
- top / left
-
offset
- width / height
- top / left
- parent
-
scroll
- width / height
- top / left
注： 方法组合到一起的时候，注意驼峰命名法，后面的词首字母要大写
方法：
window.getComputedStyle([ELEMENT],(伪类)) / [ELEMENT] .currentStyle
注： 所有的DOM操作的属性和方法，在jQuery中都有对应的属性和方法。
client系列
let box = document.getElementById('box');
//=> 获取盒子可视区域的宽高（内容宽高+padding）
box.clientWidth //=> 内容宽度+左右padding
box.clientHeight //=> 内容高度+上下padding
注意：
1.即使内容有溢出，也不会影响clientWidth 和 clientHeight 得到的宽高，因为得到的是可视区域的宽高，溢出的内容看不到了
2.获取的结果是没有单位的（其余的盒模型属性也是）
3.获取的结果是整数，它会自己进行四舍五入（其余的盒模型属性也是），滚动条属性有小数
//获取当前页面一屏幕的（可视化）区域的宽高
let winW = document.documentElement.clientWidth || document.body.clientWidth;
let winH = document.documentElement.clientHeight || document.body.clientHeight;
//获取盒子左边框和上边框的大小
box.clientLeft
box.clientTop
offset系列
// 获取当前盒子的总宽高(在client的基础之上加上border)
offsetWidth ==> 宽度(width) + 左右的padding + 左右的border
offsetHeight ==> 高度(width) + 上下的padding + 上下的border
offsetLeft offsetTop
获取当前盒子距离父级参照物的左上偏移量
获取的是当前参照物的外边框到父级参照物的内边框的距离（除IE浏览器以外，IE是外边框到外边框）
offsetParent =>获取当前盒子的父级参照物（当前盒子的所有父元素中，谁有position定位，那他的父级参照物就是谁）
//如果父级元素里面没有position定位，默认的父级参照物是body
scroll系列
// 获取当前盒子真实的宽度和高度
scrollHeight ==>在没有溢出的情况下，和clientHeight是一样的，但是在溢出的情况下约等于上padding+盒子的真实高度
scrollWidth ==>在没有溢出的情况下，和clientHeight是一样的，但是在溢出的情况下约等于左padding+真实盒子的宽度
box.scrollTop 当前盒子滚动条纵向卷去的距离（上面看不到的内容的高度）
box.srollLeft 当前盒子滚动条横向卷去的距离
//只有这两个属性既可以获取，也可以设置
//将scrollTop 设置为0，滚动条就回到顶部了
getComputedStyle/ele.currentStyle
getComputedStyle
1）在js中获取元素的CSS样式
2）只要元素在页面中呈现出来的样式，当前的样式就是元素计算出来的样式，而getComputedStyle获取的就是计算之后的样式
3）只能获取，不能设置样式
4）在ie浏览器下不能使用，注意兼容性
5）如果有符合样式，名字要遵循驼峰命名法
注： 目前还不能用js设置CSS里面的样式，js只能用来设置行内样式(写在标签内部的样式)
用法： getComputedStyle(ele,伪类)
返回值是一个对象
注意：
在IE下要使用ele.currentStyle，这是一个属性，返回值是一个对象
box.currentStyle.width //获取 box 的宽度
