浏览器中元素尺寸和坐标的名词解释

Width和Weight:内容区域宽和高

Padding:内边距

Border:边框

Margin:外边距

一、offset(偏移量)

offsetWidth、offsetHeight属性:以CSS像素返回元素的屏幕尺寸，返回的尺寸包含元素的边框、内边距和内容区域，除去了外边距。（包含滚动条）

offsetParent属性:返回元素相对的父元素。

offsetLeft、offsetTop属性:返回元素相对于父元素的文档坐标，offsetLeft返回X坐标,offsetTop返回Y坐标。

二、client(客户端)

clientWidth、clientHeight属性:以CSS像素返回元素的屏幕尺寸，返回的尺寸包含元素的内边距和内容区域，除去了边框和外边距。（不包含滚动条）

在文档的根元素上查询clientWidth和clicentHeight时，他们的返回值和window的innerWidth和innerHeight属性值相等。

clientLeft、clientTop属性:返回元素的内边距的外边缘和它的边框的外边缘之间的水平距离和垂直距离，通常这些值就等于左边和上边的边框宽度。但是，如果元素有滚动条，并且浏览器将这些滚动条放置在左侧或顶部，clientLeft也就是左滚动条的宽度、clientTop也就是上滚动条的宽度。对于内联元素（无边框也无滚动条），它们返回的值永远是0。

三、scroll(滚动)

scrollWidth、scrollHeight属性：以CSS像素返回元素的屏幕尺寸，返回的尺寸包含元素的内边距和内容区域以及任何溢出内容的尺寸。

scrollLeft、scrollTop属性(可写属性)：指定元素的滚动条的位置。(HTML 元素并没有类似 Window 对象的 scrollTo() 方法)

本文出自 “希望家园” 博客，转载请与作者联系！