共计 938 个字符，预计需要花费 3 分钟才能阅读完成。
先写一个简略的页面，浏览器看一下成果。
<!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 + 左右 paddingborder-box下为width - 左右 border
正文完
