区分offset、client、scrolloffset和client offsetLeft和clientLeft of

一、offset系列

offsetWidth/offsetHeight:返回元素在页面中的自身宽高(padding+border)

   .box {
      width: 200px;
      border: 20px solid lightgreen;
      padding: 5px;
      console.log(box.offsetWidth) //250

offsetLeft/offsetTop:返回元素左侧/上侧外边框距离最近的定位父级的距离

二、client系列

clientWidth/clientHeight:返回元素在页面中的自身高度（padding）

    .box {
       width: 200px;
       border: 20px solid lightgreen;
       padding: 5px;
       console.log(box.clientWidth) //210

clientLeft/clientTop：返回元素左/上边框的宽度

     .box {
             width: 200px;
             height: 200px;
             padding: 10px;
             margin: 5px;
             border: 15px solid lightblue;
             console.log(box.clientLeft)  //15px
         }

三、坐标系列

clientX/clientY：返回当事件被触发时，鼠标指针的坐标(到浏览器窗口的坐标)
offsetX/offsetY：返回当事件被触发时，鼠标指针的坐标(在事件源中的坐标)
pageX/pageY：返回当事件被触发时，鼠标指针的坐标(整个页面中的坐标)

四、可视区宽高

获取浏览器可视区宽高（不含滚动条的位置）

 console.log( document.documentElement.clientWidth );
 console.log( document.documentElement.clientHeight );

获取整个页面宽高（html）

 console.log( document.documentElement.offsetWidth );
 console.log( document.documentElement.offsetHeight );

获取浏览器可视区宽高（包含滚动条）

 console.log( window.innerWidth );
 console.log( window.innerHeight );

返回电脑分辨率的值（不含任务栏的宽/高）

console.log( window.outerWidth );
console.log( window.outerHeight );

获取页面可滚动内容的总宽/高度

console.log( document.documentElement.scrollWidth );//网页正文全文宽度
console.log( document.documentElement.scrollHeight );//网页正文全文高度

五、示例

offsetLeft和clientLeft

offsetLeft 与定位有关，clientLeft与border有关

无定位

 .box {
      border: 20px solid lightgreen;
      padding: 5px;
      margin: 50px;
      console.log(box.offsetLeft) // 50(margin)
      console.log(box.clientLeft) // 20(border)
  }

定位(相对定位除外）

  p {
        padding: 10px;
        margin: 20px;
        left: 10px;
        top: 0;
        console.log(p.offsetLeft) // 30(margin+left)
        console.log(p.clientLeft) // 0(border)
    }

offsetLeft

```
  body{margin:0};
  .box{margin:0}
```

  body{margin:8px} //body存在默认值

.box{position:relative；margin:50px}  //父盒存在定位和margin值