盒模型介绍
盒模型是CSS中一个重要的概念，它是CSS布局的基础，用于描述一个元素在页面中的大小和位置。盒模型可以看做是一个矩形框，它包括四个部分：内容区域、内边距、边框和外边距。CSS盒模型有两种表示方式：W3C盒模型和IE盒模型。
W3C盒模型
W3C盒模型是最常用的盒模型，它的内容区域（content）不包括边框（border）和内边距（padding），即元素的宽度和高度仅包括内容区域的大小。如下图所示：
上图中的盒子宽度为400px，高度为200px，内容区域的宽度为300px，高度为100px，边框为2px，内边距为50px，外边距为0。样式代码如下：
div {
width: 400px;
height: 200px;
padding: 50px;
border: 2px solid #000;
margin: 0;
}
在W3C盒模型中修改content的宽高可用width和height属性，示例代码如下所示：
div {
width: 300px;
height: 100px;
}
这时元素的总宽度为400px，高度为200px，因为边框和内边距的值不会改变，只有内容区域改变。
IE盒模型
IE盒模型内容区域包括边框和内边距，与W3C盒模型不同。如下图所示：
上图中盒子的宽度和高度与W3C盒模型相同，但内容区域的宽度和高度为250px和50px。样式代码如下：
div {
width: 400px;
height: 200px;
padding: 50px;
border: 2px solid #000;
margin: 0;
box-sizing: border-box;
}
在IE盒模型中修改内容区域宽高需使用box-sizing属性，设置为border-box，示例代码如下：
div {
width: 300px;
height: 100px;
box-sizing: border-box;
}
这时元素的总宽度和高度会随着内容区域的改变而改变，边框和内边距不变。
如何选择盒模型
选择W3C盒模型还是IE盒模型存在争议，但大多数浏览器都采用了W3C盒模型。在某些特殊需要下，可能需要使用IE盒模型解决问题，但要注意浏览器的兼容性问题。
在CSS3中，可以使用box-sizing属性指定使用哪种盒模型。如果要使用W3C盒模型，box-sizing属性的值应设为content-box；如果要使用IE盒模型，属性值应设为border-box。
div {
box-sizing: content-box; /* 使用W3C盒模型 */
box-sizing: border-box; /* 使用IE盒模型 */
}
总结
了解CSS盒模型是每一个前端工程师基本的技能之一。本文介绍了盒模型的两种方式——W3C盒模型和IE盒模型，并分别使用样式代码实现了它们在页面上的表现形式。同时，还介绍了如何根据需要选择盒模型以及在CSS3中如何指定盒模型，希望本文对大家有所帮助。