关于offsetWidth的理解
offsetWidth这个值是由 width+border+padding 构成的（应该没错吧）
如果1的理解没问题，那么在box-sizing:border-box的情况下，offsetWidth是元素的width值，而这个width值由元素本身的宽度+padding值+border值构成。
也就是box{width:100px,padding:10px,border:10px}。offsetWidth值为100
在box-sizing:content-box的情况下，offsetWidth是元素的width值+padding值+border值。
也就是box{width:100px,padding:10px,border:10px}。offsetWidth值为140
4. 我用代码试了一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
#box1{
box-sizing: content-box;
width: 100px;
padding:10px;
border:10px solid #222;
background-color: red;
}
#box2{
box-sizing: border-box;
width: 100px;
padding:10px;
border:10px solid #222;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1"></div
><div id="box2"></div>
<script>
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
console.log('content-box: '+ box1.offsetWidth);
console.log('border-box: '+ box2.offsetWidth);
</script>
</body>
</html>
content-box少了1px，不知道是从哪里丢了的，没找到。
正在回答
同学你好，同学理解的是正确的。关于测试结果：这边也是使用的火狐最新版，结果是可以正常解析的，如下图：
同学测试的效果不准确有可能是缩放了浏览器，建议调整为100%进行测试。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星