首先，我们要明白的是。盒子模型指的是width，height，padding，border，margin。
第二，IE盒子模型也是怪异盒子模型，w3c盒子模型指的是标准盒子模型。
第三，IE盒子模型的height不但包括了content的高度，还包括padding和border的宽度。w3c盒子模型的height只包括content的高度，不包括padding和border。
第四，这两种盒子模型，没有什么好与不好。需要我们看场景去选择这两种盒子模型，这样才能更好的适用场景。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IE盒子模型和w3c盒子模型的区别</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
padding: 10px;
border:10px solid gray;
margin: 10px;
background-color: green;
}
.box1{
width: 300px;
height: 300px;
padding: 10px;
border:10px solid gray;
margin: 10px;
background-color: red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
我们来看一下正常的盒子模型：
正常的盒子模型，他的宽度和高度都是300+10+10+10 +10 = 340，整个盒子的大小就是340，不加上盒子的外边距。
我们来看一下IE盒子模型：
这个盒子，明显要比上面的盒子的宽度和高度要小很多。他是260+10+10+10 +10 =300，不加盒子的外边距。
所以，IE盒子模型和w3c盒子模型看起来就是，IE盒子模型比较老实，你给他多少宽度和高度，他总的大写就是多少。w3c盒子模型就是，你给他多少宽度和高度，他就保留多少宽度和高度。其他的他另外计算。
我们接下来要探求，IE盒子模型和w3c盒子模型在js中计算盒子的高度和宽度有什么区别没有？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IE盒子模型和w3c盒子模型的区别</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
padding: 10px;
border:10px solid gray;
margin: 10px;
background-color: green;
}
.box1{
width: 300px;
height: 300px;
padding: 10px;
border:10px solid gray;
margin: 10px;
background-color: red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<div class="box1" id="box1"></div>
<script>
var box =document.getElementById("box");
console.log(box.offsetHeight); //340
console.log(box.offsetWidth); //340
var box1 = document.getElementById("box1");
console.log(box1.offsetHeight); //300
console.log(box1.offsetWidth); //300
</script>
</body>
</html>
从上面得出的数据可以看出，
offsetWidth = padding(左，右) + width + border(左，右)
offsetHeight = padding(上，下) + height + border(上，下)
offsetTop和offsetLeft 获取元素到定位父级的距离。如果父级没有定位则是到body的顶部/左边的位置。比如margin。
总结
关于盒子模型的知识点，我们要弄清楚，这样才能在平时的日常工作中，节省时间，让自己写起代码来更加轻松。
