js的clientWidth、offsetWidth等

 client

// css 部分
<style>
  .test{
     width:100px;
     height:100px;
     border:1px solid red;
     padding:20px;
}
    </style>
// body 和 js 部分
<div class="test">
        hello
</div>
<script>
   var div = document.getElementsByTagName('div')[0];
   console.log(div.clientWidth);  // 140
   console.log(div.clientHeight)  // 140
   console.log(div.clientTop)  // 1
   console.log(div.clientLeft) // 1
　　// 注意不含有以下两个属性
   // console.log(div.clientRight)
   // console.log(div.clientBottom)
</script>

clientWidth = padding值*2（左右padding值） + width 值；

clientHeight = padding值*2（上下padding值） + height 值；

clientTop = border值（上边框值）

clientLeft = border值（左边框值）

offset

<script>
    var div = document.getElementsByTagName('div')[0];
    console.log(div.offsetWidth); //142
    console.log(div.offsetHeight) //142
    console.log(div.offsetTop)  // 8
    console.log(div.offsetLeft)  // 8
　　//注意： 以下两个属性不存在
    console.log(div.offsetRight)
    console.log(div.offsetBottom)
</script>

offsetWidth = 左右padding值+width值+左右border值

offsetHeight = 上下padding值+height值+上下border值

注意: 祖先元素的position不能为static，如果所有祖先元素的position都为static，则以body为标准(都是只读属性)

offsetTop 表示该元素的边框上边缘与它最近父元素的上边框内边缘的距离，如果没有父元素则把body当做它的父元素，由此知（默认情况下body有个margin值8px）

offsetTop = 8

offsetLeft = 8

scroll

scrollwidth (padding + width)包含水平滚动条部分，也就是内容区域的宽度，包含被隐藏的部分
scrollHeight (padding + height)包含垂直滚动条部分，也就是内容区域的高度，包含被隐藏的部分
以上两个属性如果内部有隐藏部分，则它们的值为子元素的margin + padding + border + (width | height)

这两个属性可以设置它默认滚动的值，直接设置数字即可，可读可写
scrollLeft (滚动条滚动的水平距离，默认为0)
scrollTop (滚动条滚动的垂直距离，默认为0)

浏览器窗口大小

window.innerWidth (浏览器窗口宽度，不包含工具栏，菜单等，仅仅是可视区域dom的width)
window.innerHeight (浏览器窗口高度，不包含工具栏，菜单等，仅仅是可视区域dom的height)
window.outerWidth (浏览器窗口宽度，包含工具栏、菜单等，整个浏览器的width)
window.outerHeight (浏览器窗口高度，包含工具栏、菜单等,整个浏览器的height)

以下属性是当元素绑定事件时，才会有这些属性

客户区坐标位置（clientX，clientY）

鼠标事件都是在浏览器视口中的特定位置发生的。这个位置信息保存在事件对象的clientX和clientY属性中，所有浏览器都支持这两个属性。

页面坐标位置（pageX，pageY）

pageX和pageY两个属性代表鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶边计算的。在没有滚动的情况下，clientX和cilentY与pageX和pageY是相等的。

（offsetX,offsetY）

例如在绑定在点击事件上，则offsetX的值则为鼠标点击在盒子内的位置值，是以绑定事件的盒子为标准的，offsetY也是如此

屏幕坐标位置

鼠标事件发生的时候，不仅仅会有相对于浏览器的窗口，还有一个相对于整个电脑屏幕的位置。通过事件对象中的screenX和screenY属性就可以获得相关的属性信息。

window对象下可以拿到scrollX和scrollY，跟scrollTop和scrollLeft是一样的，不过后者需要Dom节点才能拿到