获取元素尺寸信息的方式有很多种。不同的尺寸属性有不同的定义，如果不能很好地概括，可能会造成混淆。下面一起来看看吧。偏移大小（offset）元素是相对于父元素（offsetParent）的偏移大小。offsetWidth元素在水平方向占用的像素大小，包括：content、padding、垂直滚动条（macos系统的滚动条不占空间，所以不计算）、border。??返回值：只读，不可设置；以像素为单位的整数；如果需要精确到小数点，可以使用方法：element.getBoundingClientRect()。offsetHeight元素在垂直方向上占用的像素大小，包括：content、padding、水平滚动条（macos系统的滚动条不占空间，所以不计算）、border。??返回值：只读，不可设置；以像素为单位的整数；如果需要精确到小数点，可以使用方法：element.getBoundingClientRect()。offsetParentoffsetLeft和offsetRight属性的返回值表示元素与元素的offsetParent之间的偏移距离，所以确定offsetParent很重要。判断一个元素的offsetParent的步骤——根据包含的层级关系，从近到远依次判断该元素的父元素：是否是定位（position不是static）元素；如果是，则返回该元素。是不是
| , | 元素；如果是，则返回该元素。它是一个元素吗？如果是，则返回该元素。当offsetParent为null时：如果元素或其父元素的style属性display设置为none。如果元素的样式属性位置设置为固定（Firefox返回）。元素是或。offsetLeft定义：从元素左边框外侧到元素offsetParent左边框内侧的像素数。??返回值：只读，不可设置；以像素为单位的整数；如果需要精确到小数点，可以使用方法：element.getBoundingClientRect()。offsetTop定义：元素上边框外侧到元素offsetParent上边框内侧的像素数。??返回值：只读，不可设置；以像素为单位的整数；如果需要精确到小数点，可以使用方法：element.getBoundingClientRect()。ClientsizeclientWidth元素内部宽度，包括：content，padding。?clientWidth对行内元素返回0。??返回值：只读，不可设置；以像素为单位的整数；如果需要精确到小数点，可以使用方法：element.getBoundingClientRect()。clientHeight元素内的高度，包括：content，padding。?clientHeight对行内元素返回0。??返回值：只读，不可设置；以像素为单位的整数；如果需要精确到小数点，可以使用方法：element.getBoundingClientRect()。scrollsize滚动原理当容器元素中无法显示所有元素时，会产生滚动条；通过滑动水平或垂直滚动??条，将要显示的内容显示在容器元素的视口上。对于Windows操作系统，滚动条占用一定的大小；大小属性从内到外：content、padding、scroll、border、margin。发生滚动时，content+padding为滚动区域，scroll+border+margin为固定区域。从上图可以看出：发生滚动的区域是content+padding。滚动的兼容性问题从下图可以看出，当发生滚动时，contentarea中的文本可以溢出到paddingarea中。从下图可以看出，在Safari浏览器中，没有显示元素的margin-right和容器元素的padding-right，这与Chrome浏览器的表现不同。通过上面两个例子可以看出，元素的padding和容器元素的padding&margin都存在浏览器兼容性问题。通过取消设置元素和容器元素的内边距、边框和边距，滚动元素和容器元素，内容为： |
|---|