wKioL1MrnCXzsjM8AABb71ra_Lg906.jpg


Width和Weight:内容区域宽和高

Padding:内边距

Border:边框

Margin:外边距


一、offset(偏移量)


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


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


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


二、client(客户端)


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

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


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


三、scroll(滚动)


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


scrollLeft、scrollTop属性(可写属性)：指定元素的滚动条的位置。