clientWidth/clientHeight 返回元素 padding-box 尺寸（含 content+padding，不含 border/margin/scrollbar）；视口尺寸应使用 document.documentElement.clientWidth/clientHeight，它们严格不含边框和滚动条。
clientWidth 和 clientHeight 本身就是获取**不含边框（border）和滚动条（scrollbar）** 的元素内部可视区域尺寸，所以你不需要额外“去除边框”——它们默认就是这个行为。
clientWidth/clientHeight 的真实含义
这两个属性返回的是元素的内边距区域（padding-box）的宽高，即：
- 包含 内容区（content） + 内边距（padding）
- 不包含 边框（border）、外边距（margin） 和 滚动条（scrollbar）
特别注意：如果元素有垂直滚动条且未隐藏（如 overflow: auto 且内容溢出），clientWidth 会自动减去滚动条宽度；水平滚动条同理影响 clientHeight。
获取文档视口（viewport）的无边框宽高
如果你目标是整个页面的可视区域（即浏览器窗口中显示网页的部分），应该用：
立即学习“Java免费学习笔记（深入）”；
-
document.documentElement.clientWidth—— 文档根元素（）的 clientWidth，等价于视口宽度（不含滚动条） -
document.documentElement.clientHeight—— 同理，视口高度
✅ 这两个值就是标准、稳定、不含边框和滚动条的视口尺寸，适用于响应式判断、元素定位等场景。
常见误区与对比
别混淆这些相似属性：
-
offsetWidth/offsetHeight：含 border + padding + content（还可能含 vertical scrollbar） -
getBoundingClientRect().width/height：返回元素在视口中的实际渲染尺寸（含 transform 缩放影响，但不含 margin） -
window.innerWidth/innerHeight：包含滚动条宽度（⚠️ 不符合“不含边框/滚动条”的要求）
所以，要严格“不含边框”，document.documentElement.clientWidth/clientHeight 就是最直接、最准确的选择。
不复杂但容易忽略：它们反映的是当前渲染状态，DOM 变化或 resize 后需重新读取。
