offsetWidth包含内容、内边距、边框及滚动条宽度，反映元素总物理尺寸；clientWidth仅含内容和内边距，不包括边框和滚动条，表示可视区域大小。
直接用 element.offsetWidth 和 element.clientWidth 就能获取宽度，但它们代表的“宽”不是一回事——关键看要不要算边框和滚动条。
offsetWidth：元素占位的总宽度
它反映的是元素在页面上实际占据的水平空间，包含四部分：
- 内容区宽度（CSS 设置的 width）
- 左右内边距（padding-left + padding-right）
- 左右边框（border-left-width + border-right-width）
- 如果垂直滚动条存在，也计入其宽度（哪怕被隐藏，浏览器仍按需计算）
这个值稳定、只读，适合做布局空间判断，比如检查容器是否足够放下某个子元素，或计算相对定位偏移量。
clientWidth：内部可视区域宽度
它代表你“能真正放内容”的那一块区域，只含：
立即学习“Java免费学习笔记（深入）”；
- 内容区宽度
- 左右内边距
不包括边框、滚动条、外边距（margin）。特别注意：如果有垂直滚动条且显示在内部（如 overflow: auto），clientWidth 会自动减去滚动条宽度——这是它和 offsetWidth 最常出现差值的地方。
怎么区分？一个直观例子
假设一个 div 设置了：width: 200px; padding: 10px; border: 3px solid #000;
且内容刚好不溢出，没有滚动条：
-
clientWidth= 200 + 10 + 10 = 220px -
offsetWidth= 200 + 10 + 10 + 3 + 3 = 226px
如果内容变长导致出现 17px 宽的滚动条（常见于 Chrome）：
-
clientWidth变成 200 + 10 + 10 − 17 = 203px（滚动条挤占了可视区） -
offsetWidth仍是 226px（滚动条属于元素的一部分，已计入）
使用时要注意什么
这两个属性都要求元素已渲染且非 display: none；visibility: hidden 不影响获取。另外：
- 对 inline 元素（如 span），二者通常返回 0
- 受
box-sizing影响：设为border-box时，width 已含 padding 和 border，但 offsetWidth 依然按“content + padding + border”逻辑计算，结果不变 - 想获取带 CSS transform 的真实渲染尺寸？用
getBoundingClientRect().width
不复杂但容易忽略
