先写一个简略的页面，浏览器看一下成果。

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      #box {        width: 200px;        height: 200px;        padding: 20px;        margin: 20px;        border: solid 10px black;      }    </style>  </head>  <body>    <div id="box">content</div>  </body>  <script>    var box = document.getElementById('box');    console.log(box.clientWidth);  </script></html>

<p>box.clientWidth为240，这是咱们没有设置box-sizing，浏览器默认为content-box。clientWidth = width + 左右padding即200+40=240。</p>

当咱们给这个元素设置box-sizing：border-box，再次查看该div

这时box.clientWidth为180，不再是200+40，而是140+40=180,然而140我并没有写到css外面。

咱们看一下官网是怎么说的：内联元素以及没有 CSS 款式的元素的 clientWidth 属性值为 0。Element.clientWidth 属性示意元素的外部宽度，以像素计。该属性包含内边距 padding，但不包含边框 border、外边距 margin 和垂直滚动条（如果有的话）。

网上很多解析都说是width+padding，其实这并不精确，对于刚接触前端的同学来说更是满脸问号。

总结：

  1. 无论哪种盒子模型下，clientWidth都不包含border、margin、滚动条
  2. content-box下为width + 左右padding
  3. border-box下为width - 左右border