首先盒子模型有两种，一种是W3C和IE盒子模型。
W3C盒子模型包括：内容（width，height),padding,border,margin;
W3C盒子模型的可视宽度：width+border+padding;
IE盒子模型包括（怪异盒子模型）：内容（width,height),padding,border,margin;
IE盒子模型的可视宽度是：width;
在css3中新增了box-sizing样式：
box-sizing样式可以指定盒子模式；
box-sizing:content-sizing样式可以指定W3C盒子模型；（浏览器默认是W3C盒子模型）
box-sizing:border-box样式可以指定IE盒子模型。
总结：W3C盒子模型的可视宽度是width+border+padding;设置时会不断向外扩张，而IE盒子模型IE盒子模型的可视宽度是：width;设置时border和padding时会不断向内争夺width的大小。
直接上代码：
<!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>
*{
margin: 0;
padding: 0;
}
.w3c{
width: 100px;
height: 100px;
padding: 10px;
box-sizing: content-box;
background: green;
border: 10px solid red;
}
.IE{
width: 100px;
height: 100px;
box-sizing: border-box;
padding: 10px;
background: red;
border: 10px solid yellow;
}
</style>
</head>
<body>
<div class="w3c">W3C盒子模型</div>
<div class="IE">IE盒子模型</div>
</body>
</html>W3C盒子模型
IE盒子模型
我遇到的疑问：为什么我设置的boder和检查中的boder不一致？
如有想法，可以评论区交流！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
