offset三大家族

以下是关于 offset 三大家族的知识点总结：

1. offsetParent

• 定义：offsetParent 是距离目标元素最近的已定位（position 不为 static）的祖先元素。
• 特点：
  • 如果父级元素都没有定位，则 offsetParent 为 body。
  • 与 parentNode 和 parentElement 不同，offsetParent 与定位有关。

2. offsetLeft 和 offsetTop

• 定义：offsetLeft 和 offsetTop 分别表示目标元素相对于其 offsetParent 左边缘和上边缘的偏移量。
• 特点：
  • 如果父级元素都没有定位，则偏移量是相对于 body 的距离。
  • 这些值适合用于计算，但不带单位，因此不能直接用于设置样式。

3. offsetWidth 和 offsetHeight

• 定义：offsetWidth 和 offsetHeight 分别表示目标元素的布局宽度和高度。
• 包含内容：
  • 内容区域、内边距（padding）和边框（border）。
  • 不包括外边距（margin）。
• 特点：
  • 这些值适合用于计算，但不带单位，因此不能直接用于设置样式。

4. 注意事项

• 计算高度：offsetHeight 不会包含 margin。
• 与定位的关系：offsetParent 与定位有关，而 parentNode 和 parentElement 与定位无关。
• 使用场景：offsetLeft 和 offsetWidth 等属性适合用于计算，但不适合直接用于设置样式。

5. 总结

• offset 三大家族（offsetParent、offsetLeft/offsetTop、offsetWidth/offsetHeight）主要用于获取元素的位置和尺寸信息，适合用于计算和布局调整。
• 这些属性与元素的定位和布局密切相关，但在设置样式时需要注意其不带单位的特点。