关于前端:Js-clientWidth详解

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

<!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，其实这并不精确，对于刚接触前端的同学来说更是满脸问号。

总结：

无论哪种盒子模型下，clientWidth都不包含border、margin、滚动条

content-box下为width + 左右 padding

border-box下为width - 左右 border