提供一些属性和方法用来描述当前盒子的样式的

clientWidth / clientHeight

当前盒子可视区域的宽度和高度 
可视区域：内容宽高+padding 
clientWidth = width + padding(Left/Right) 
clientHeight = height + padding(Top/Bottom)

和内容是否溢出以及我们是否设置了 overflow:hidden; 没有关系

//=>获取当前页面一屏幕的宽度（加或者是为了兼容所有的浏览器）
document.documentElement.clientWidth || document.body.clientWidth

//=>获取当前页面一屏幕的高度
document.documentElement.clientHeight || document.body.clientHeight

clientTop 和 clientLeft

只有top和left，没有right和bottom这两个属性 
clientTop：盒子上边框的高度 
clientLeft：左边框的宽度 
获取的结果其实就是border-width值

通过JS盒子模型属性获取的结果是不带单位的，而且只能是整数（它会自动四舍五入）

.box{
   border:10.8px silid red;
}

box.clientLeft =>11

offsetWidth 和 offsetHeight

在clientWidth和clientHeight的基础上加上盒子的边框即可
和内容是否溢出没关系
真实项目中如果想获取一个盒子的宽度和高度，我们一般用offsetWidth（而不是clientWidth），
border也算是当前盒子的一部分

scrollWidth 和 scrollHeight

[ 没有内容溢出 ] 
获取的结果和clientWidth/clientHeight是一样的
[ 有内容溢出 ] 
真实内容的宽度或者高度(包含溢出的内容)，在加上左padding或者上padding的值
有内容溢出的情况下，我们通过scrollWidth或者scrollHeight获取的结果是一个约等于的值 
1) 有内容溢出，每个浏览器由于对行高或者文字的渲染不一样，回去的结果也是不一样的 
2) 是否设置 overflow:hidden 对最后获取的结果也有影响

//=>获取当前页面真实高度（包含溢出内容）
document.documentElement.scrollHeight||document.body.scrollHeight