三剑客：offset、client和scroll还傻傻分不清？

当我们在页面布局时，经常需要用到三个CSS属性：offset、client和scroll，它们被称为“三剑客”，但是它们的区别常常被人误解。接下来我们详细讲解它们的区别及使用情况。

offset

offset指的是当前元素在整个页面文档中的位置，它包含四个值：offsetTop、offsetLeft、offsetWidth和offsetHeight。

• offsetTop：指的是当前元素顶部相对于页面文档顶部的距离，单位为像素。
• offsetLeft：指的是当前元素左侧相对于页面文档左侧的距离，单位为像素。
• offsetWidth：指的是当前元素的宽度，包括border、padding和实际内容的宽度，单位为像素。
• offsetHeight：指的是当前元素的高度，包括border、padding和实际内容的高度，单位为像素。

示例：

<div id="box">这是一个div</div>

#box {
  width: 200px;
  height: 100px;
  border: 1px solid #333;
  padding: 10px;
}

const box = document.getElementById("box");
console.log(box.offsetTop); // 相对于页面的顶端距离
console.log(box.offsetLeft); // 相对于页面的左侧距离
console.log(box.offsetWidth); // 元素的宽度, 包括 padding 和边框
console.log(box.offsetHeight); // 元素的高度, 包括 padding 和边框

client

client指的是当前元素的可视区域大小及位置，它包含四个值：clientTop、clientLeft、clientWidth和clientHeight。

• clientTop：指的是当前元素上边框的宽度，即外边框到内边框的距离，单位为像素。
• clientLeft：指的是当前元素左边框的宽度，即外边框到内边框的距离，单位为像素。
• clientWidth：指的是当前元素的宽度，包括padding，但不包括border和margin，单位为像素。
• clientHeight：指的是当前元素的高度，包括padding，但不包括border和margin，单位为像素。

示例：

<div id="box">这是一个div</div>

#box {
  width: 200px;
  height: 100px;
  border: 1px solid #333;
  padding: 10px;
  overflow: scroll;
}

const box = document.getElementById("box");
console.log(box.clientTop); // 上边框的宽度
console.log(box.clientLeft); // 左边框的宽度
console.log(box.clientWidth); // 可视区的宽度
console.log(box.clientHeight); // 可视区的高度

scroll

scroll指的是当前元素的滚动区域大小及位置，它包含四个值：scrollWidth、scrollHeight、scrollLeft和scrollTop。

• scrollWidth：指的是当前元素的滚动内容的宽度，包括实际内容的宽度和溢出的内容宽度，单位为像素。
• scrollHeight：指的是当前元素的滚动内容的高度，包括实际内容的高度和溢出的内容高度，单位为像素。
• scrollLeft：指的是当前元素滚动条的水平位置，当内容被水平滚动时，该值会改变，单位为像素。
• scrollTop：指的是当前元素滚动条的垂直位置，当内容被垂直滚动时，该值会改变，单位为像素。

示例：

<div id="box">
  <p>这是一个p标签</p>
  <p>这是一个p标签<br>测试<br>自适应文字溢出</p>
  <p>这是一个p标签</p>
  <p>这是一个p标签</p>
  <p>这是一个p标签</p>
  <p>这是一个p标签</p>
  <p>这是一个p标签</p>
  <p>这是一个p标签</p>
  <p>这是一个p标签</p>
  <p>这是一个p标签</p>
  <p>这是一个p标签</p>
  <p>这是一个p标签</p>
  <p>这是一个p标签</p>
  <p>这是一个p标签</p>
</div>

#box {
  width: 200px;
  height: 100px;
  border: 1px solid #333;
  padding: 10px;
  overflow: scroll;
}

const box = document.getElementById("box");
console.log(box.scrollWidth); // 内容的实际宽度 (不包括padding) + 溢出的宽度
console.log(box.scrollHeight); // 内容的实际高度 (不包括padding) + 溢出的高度
console.log(box.scrollLeft); // 元素水平滚动的距离
console.log(box.scrollTop); // 元素垂直滚动的距离

总结：

以上所述便是三剑客：offset、client和scroll的详细讲解及示例。希望本文能够帮助你更清晰地理解它们的差异和使用情况。