24.js获取元素尺寸、元素偏移量、获取文档尺寸

获取元素尺寸

1.元素.offsetWidth   元素.offsetHeight

        元素内容区+padding+border

2.元素.clientWidth   元素.clientHeight

        元素内容区+padding

元素设置display：none  则无法获取尺寸

获取元素的偏移量（就是元素相对于某个位置的左上距离）

1.元素.offsetLeft  元素.offsetTop

        获取元素左边和上边的偏移量

2.元素.offsetParent

        获取元素偏移的参考父级

        若元素定位，那么参考父级是包含块

        若没有定位，那么元素参考父级是body

3.元素.clientLeft  元素.clientTop

    获取元素的上边框和左边框宽度

包含块

1. position:static

        包含块通常是元素的最近的具有定位上下文（positioning context）的祖先元素

2.position:absolute

        包含块是最近的具有非static定位（position: relative, position: absolute, 或 position:         fixed）的祖先元素

3.position:absolute

        包含块是元素本身的边界框

4. position:fixed

       包含块是视口（viewport），即浏览器窗口的可视区域，而不是任何特定的HTML元素。

获取文档尺寸

1.窗口大小

window.innerWidth

window.innerHeight

2.文档大小

document.documentElement.clientWidth

document.documentElement.clientHeight

当没有滚动条窗口和文档的大小一样

当有滚动条，文档不包含滚动条尺寸