1.标准盒模型
标准盒模型在这里插入图片描述
也称W3C盒模型，现在大部分浏览器都采用标准盒模型，
在标准模式下，一个元素所占的总宽度=width(content)+padding(左右)+margin(左右)，元素的高度同理也是一样的。
如图所示：
2.IE盒模型
标准盒模型也称怪异盒模型，IE6之前的浏览器默认采用怪异盒模型，
在怪异模式下，一个元素所占的总宽度=width+margin(左右)，（即width包含了border+padding+content）元素的高度同理也是一样的。
如图所示：
标准盒模型和IE盒模型，代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#ieBox{
width: 200px;
height: 200px;
padding: 20px;
margin: 10px;
border:5px solid rgb(0, 255, 234);
box-sizing: border-box;
/* 加上 box-sizing: border-box; 后可以将div盒模型设置为IE盒模型*/
background: greenyellow;
}
#Box{
width: 200px;
height: 200px;
padding: 20px;
margin: 10px;
border:5px solid rgb(0, 255, 234);
box-sizing:content-box;
/* 加上 box-sizing: border-box; 后可以将div盒模型设置为标准盒模型*/
background: red;
}
</style>
</head>
<body>
<div id="ieBox">
IE盒模型
</div>
<div id="Box">
标准盒模型
</div>
</body>
</html>