关于offset client style scroll 的区别与练习

 <!--

         三大系列对比：

            1 client 系列

                element.clientTop 返回元素上边框大小

                element.clientLeft 返回元素左边框大小

                element.clientWidth 返回自身包括padding ，内容区宽度 ，不含边框，返回值不带单位

                element.clientHeight

                与offset区别  offsetWidth offsetHeight 返回值包括边框

            2 offset系列

                offsetTop

                offsetLeft

                offsetWidth   返回元素宽度   包括padding  border width

                offsetHeight  返回元素高度   包括padding  border height

                offsetParent  返回带有定位的父元素  如果没有 返回body

                offset 与 style 的区别

                offset可以获取任意样式表的样式值             style只能得到行内样式表的样式值

                offset获得的数值是没有单位的                 style.width获得的是带有单位的字符串

                offsetWidth包含boeder padding width         style.width 获得不包含padding和border的值

                offsetWidth 等属性是只读属性，只能获取不能赋值 style.width是可读写属性，可以获取也可以赋值

            3 scroll系列  可以触发scroll事件

                element.scrollTop 返回被卷去的上侧距离 返回数值不带单位  元素距离盒子上侧的距离

                element.scrollLeft 返回被卷区的左侧距离    元素距离盒子左侧的距离

                返回的是实际内容的大小，与client的区别

                element.scrollWidth 返回自身实际的宽度，不含边框   指的内容溢出是的内容的高度

                element.scrollHeight 返回自身实际的高度 不含边框

　　　4 获取页面卷区的高度与宽度

　　　　window.pageYOffset

　　　　window.pageXOffset　　

     -->