offset是什么意思(JavaScript中的offset四大家族)

大家好，今天给各位分享offset是什么意思的一些知识，其中也会对JavaScript中的offset四大家族进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！

1、offset在英语单词中有偏离的意思，在js中它与with、height、left以及top分别复合而成新的offsetWidth、offsetHeight、offsetLeft与offsetTop四大家族主要用来检测盒子标签的大小和位置。

2、在网页布局的时候，很多情况下不方便获得盒子元素的宽度和高度，这个时候，又需要知道它们的具体值，这时可以用offsetWidth和offsetHeight。

3、offsetWidth与offsetHeight示意图

4、offsetWidth=width+border+padding

5、div{\n\twidth:500px;\n\theight:400px;\n\tborder:20pxsolidred;\n\tpadding-left:30px;\n\tmargin:50px;\n}

注意点：offsetWith就是盒子的实体大小，包括宽度加边框加内边距的总和不包含margin

6、返回距离上级盒子（带有定位）左边的位置。如果父级都没有定位，则以body为准。如果父级有定位，则以父级的左侧为准。

7、如上图所示：当father无定位时，则son红色的盒子以body定位为准的距离左侧为100,当father有定位时，son以father定位为准的距离左侧为0。

关于offset是什么意思，JavaScript中的offset四大家族的介绍到此结束，希望对大家有所帮助。