脚步化css

1. 设置宽高（行内样式）

2. 设置样式（行内样式）

3. 获取页面显示样式（只能获取不能修改）

width

第二个参数只能传before after
获取伪元素样式:
getComputedStyle(oDiv, ‘after’).width;

例子：
点击按钮增加div宽度

    <div id="box"></div>
    <button id='btn'>点击增加div宽度</button>

        var wid = window.getComputedStyle(box, null).width;
        wid = parseInt(wid);
        btn.onclick = function() {
            wid += 20;
            box.style.width = wid + 'px'
        }

4. 内容可显示距离（文字和背景）(clientHeight)

height + paddind

5. 获取页面实际尺寸（offsetHeight）

height + padding + border

6. 定位父级

有定位属性的父级，如果没有，默认为body
box.offsetParrent

7. 距离定位父级的距离（offsetLeft）

8. 获取页面滚动距离

9. 获取浏览器宽高

10. 滚动条滚动

向下滚动 200px；只滚动一次

执行一次滚动一次

11. 盒子滚动距离

box.scrollTop 滚动的竖直距离

dom.scrollWidth ==> 元素实际内容的width