前端项目中经常会使用DOM元素的offsetHeight、offsetWidth、scrollHeight、scrollWidth、scrollTop、clientHeight、clientWidth等值, 对于基础薄弱的初学者来说,经常弄混,接下来使用一个图来解释一下:
它们的数值关系如下:
- offsetHeight = clientHeight + border的高度
- offsetWidth = clientWidth + border的宽度
- scrollHeight = clientHeight + scrollHeight
项目中还会用到IE盒模型和标准盒模型,两者的数值关系为:
IE 盒模型的宽度 = 标准盒模型的宽度+padding值+border值
IE 盒模型的高度 = 标准盒模型的高度+padding值+border值
标准盒模型的元素可以使用box-sizing:borde-box转换为IE盒模型。