CSS盒子模型是Web布局的基础之一。它定义了如何计算和渲染元素的大小、位置和边距等。标准的CSS盒子模型包含了元素的内容框、内边距、边框和外边距四部分。但是在IE6及之前的浏览器中，盒子模型存在着怪异模式（Quirks Mode）和标准模式（Standards Mode）两种，其盒子模型计算方式与标准有所不同。
/* 怪异模式下的盒子模型 */
div {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid #000;
margin: 10px;
}
/* 怪异模式下，实际的宽度为：200px + 2*10px(左右边框) + 2*10px(左右边距) = 240px，高度同理 */
/* 标准模式下的盒子模型 */
div {
box-sizing: border-box;
/* 设置为标准盒子模型 */
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid #000;
margin: 10px;
}
/* 标准模式下，实际的宽度为：200px，高度同理 */
为了解决版本差异带来的不兼容问题，HTML5提出了文档类型声明，指定了页面所使用的HTML版本和浏览器模式。在html文档开头加上以下文档类型声明即可使浏览器进入标准模式：
<!DOCTYPE html>
此外，为了兼容IE的旧版本，我们也可以使用CSS的box-sizing属性来控制盒子模型。将其设置为border-box即可使用标准模式的计算方式。
总之，在Web开发中，我们应该尽可能地遵循标准的盒子模型，以保证在各种浏览器中呈现出一致的效果。
