JS基础-特效篇（三大家族）01-offset(1)

https://www.cnblogs.com/sj1988/p/6600829.html
三大系列：offset、scroll、client
事件对象：event（事件被触动时，鼠标和键盘的状态）（通过属性控制）

offset:抵消；自己的，用于获取元素尺寸。

五个属性：
1.offsetWidth和offsetHeight：获取对象自身的宽度和高度，包括内容、边框和内边距，即：offsetWidth = width + border + padding。

#box{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 10px;
            border: 5px solid #449fdb;
            margin: 20px;
        }

	var box = document.getElementById('box');
    console.log(box.offsetWidth);  //230=200+5*2+10*2
    console.log(box.offsetHeight);  //230

box.style.width是拿不到行外的属性值的，只能拿到行内的！
2.offsetLeft和offsetTop：距离第一个有定位的父级盒子左边的上边的距离。
从父标签的padding开始计算，不包括border，从子盒子边框到父盒子边框。

<div id="father">
    <div id="box"></div>
</div>

        *{
            margin: 0;
            padding: 0;
        }
        #father{
            width: 400px;
            height: 400px;
            background-color: red;
            margin: 40px;
            overflow: hidden;
            /*定位*/
            position: relative; //static为没有定位
        }
        #box{
            width: 200px;
            height: 150px;
            background-color: blue;
            padding: 10px;
            border: 5px solid #449fdb;
            margin-left: 20px;
        }

    var box = document.getElementById('box');
    console.log(box.offsetLeft);  //20 = margin-left: 20px
    console.log(box.offsetTop);  //0 = 没有设置top的值