如何用js验证一下boz-sizing样式对块级盒子大小的影响？
可以用getClientRects方法，获取元素的边界矩形的矩形集合。
代码语言：javascript复制document.querySelector("#medium").getClientRects()[0].width
document.querySelector("#thick").getClientRects()[0].width使用getBoundingClientRect验证
返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小 。
1，如果是标准盒子模型，如果box-sizing: content-box，元素的尺寸等于width/height padding border-width的总和。
2，如果box-sizing: border-box，元素的的尺寸等于 width/height。
返回接口与上面的方法是一样的。
另外，使用clientWidth查看内部宽度
Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。
代码：
代码语言：javascript复制 <h1>关于getBoundingClientRect验证示例1</h1>
<div id="x">Border Box</div>
<script>
var x = document.querySelector("#x");
console.log('getBoundingClientRect().width =', x.getBoundingClientRect().width);
console.log('getComputedStyle(x).width =', getComputedStyle(x).width);
</script>
<style>
#x {
border: 20px solid blue;
padding: 10px;
width: 140px;
box-sizing: border-box;
}
</style>
<h1>关于getBoundingClientRect验证示例2</h1>
<div id="x1">Border Box1</div>
<script>
var x1 = document.querySelector("#x1");
console.log('getBoundingClientRect().width =', x1.getBoundingClientRect().width);
console.log('getComputedStyle(x1).width =', getComputedStyle(x1).width);
</script>
<style>
#x1 {
border: 20px solid blue;
padding: 10px;
width: 80px;
box-sizing: content-box;
}
</style输出：
虽然样式里宽度不同，但是输出的getBoundingClientRect().width相同。
当我们将width样式改为相同的值以后，输出便不同了。效果：
9月29日
【关于作者】
李艺，笔名“石桥码农，腾讯云最具价值专家（TVP），腾讯课堂启明星俱乐部成员，日行一课联合创始人兼 CTO，前 VIPKID 资深技术专家。国内早期闪客之一，具有 15 年以上互联网软件研发经验。
参与研发的音视频直播产品曾在腾讯 QQ 上线，为数千万人使用。从 0 到 1 创建课件标准，被团队誉为课件之父，官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1：微信全栈工程师一本通》等计算机图书，是极客时间视频畅销课《微信小程序全栈开发实战》的作者，知乎 Live 讲师，在行互联网技术专家。欢迎到“在行”找我一对一约聊。
