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>

alt

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

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

这时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