CSS中内容盒子(w3c盒子)与边框盒子(IE盒子)的区别
1.什么是内容盒子(w3c盒子)
默认的盒子模型，使用box-sizing属性可以改变盒子模型，取值为content-box的盒子为默认盒子模型
特点：当我们为一个盒子指定width属性的时候，实际上width仅为内容的宽度，当padding和border变大的时候，内容宽度不变，盒子所占的总体宽度要变大。高度也一样。
.content{
width: 100px;
height: 100px;
background-color: rgb(173, 69, 69);
margin: 10px auto;
padding: 10px 10px;
border: 5px solid black;
}
<div class="content">我是内容盒子</div>
可以看到图中给内容盒子设置了border和padding，没有改变内容区的宽高，而是往外去变大，此时盒子的实际宽高需要加上边框和内外边距的。
2.什么是边框盒子(IE盒子)
使用box-sizing属性改变盒子模型，取值为border-box的盒子为边框盒子
特点：当我们为一个盒子指定width属性的时候，实际上width包含了border和padding的宽度，如果border不变，padding变大，这时候内容会变小。
.border{
width: 100px;
height: 100px;
background-color: rgb(124, 230, 38);
box-sizing: border-box;
border: 5px solid black;
margin: 10px auto;
padding: 10px 10px;
}
<div class="border">我是边框盒子</div>
图中边框盒子中的内容区已经发生改变，给它设置的内边距和边框影响了内容区的宽高，此时整个盒子的实际宽高是100px加上外边距。
3.两者的区别
内容盒子无论设置margin，padding，border都不会影响内容区的宽高，但会影响盒子实际占的宽高。
而边框盒子需要设置padding和border属性时需要注意内容区的变化。