你必须知道的 clientWidth, offsetWidth, scrollWidth.

开启AdminJS成长之旅！这是我参与「AdminJS日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

前言： 在公司移动端项目中，我需要十分频繁的和 DOM 元素的各种 width、height 打交道。但是这里有这么多关于 width 的属性，它们之间的区别到底体现在哪里？这是我刚刚接触移动端项目十分头疼的一个问题。经过几天的查阅，终于搞明白了这几个的不同之处，特来分享。

tips: 本文意指让你自己通过联想记牢这几个属性的区别，而不是单纯地表达它们概念上的不同，故篇幅会较长，还希望读者耐下心细细品读☕️。

一. 前期准备

1. 在学习这几个概念之前，我强烈建议你用你喜欢的框架或者工具去简单写一个 <div> 元素来更深刻的体会我接下来讲解的内容。不用特别复杂，十分简单的，带有宽度高度的 div 即可。
   
   在页面上的效果如下。
   

2. 接下来你需要进入到开发者页面，选中刚刚我们创造的这个 div 元素。
   

3. 然后你需要从右边的选项卡中找到 Properties(dom 属性) 这一项中筛选出带有 width 的几个属性。
   
   接下来你将会频繁的看到这三个属性的变化。

二. clientWidth

1. 三个属性中我们先对 clientWidth 初步讲解一下。

2. 我相信大家初次去 MDN 查阅这个 Css 属性的时候，一定看到过下面这张图。
   

3. 初次看到这张图，感觉它什么都讲了，但是又好像不知道它到底想表达什么。如果你也有这样的疑惑，本文将带你一步步去体会它到底想表达什么。

4. 首先切忌死记硬背属性名，我们需要十分明确的知道这个属性名为什么叫 clientWidth 而不是叫 小猪佩奇Width。下面是这个单词的翻译，我认为 client 这个单词在这里语境中最佳的翻译应该为---"客户端，用户端"。
   

5. ok，我知道你可能还是有疑惑，别着急，我们一步一步来。经过上面 width 属性搜索结果可知，聪明的你可能已经发现 clientWidth 的值不就是我们给这个 box 设置的 width 的属性值 100 吗？
   

6. 是的，对了，但是不完全对。这里更好的说法应该是：“按照我们现在的布局和样式，clientWidth 的值和 width 的值是相等的。”对，只能称作它们的值是相等的，而不能说这两个属性是全等的。

7. 那这个 clientWidth 到底该怎么去理解呢？“客户端的宽度？用户端的宽度？”总感觉哪里怪怪的。