在CSS中，盒子模型用于定义HTML元素的布局和尺寸。每个HTML元素都被视为一个矩形盒子，具有内容区域、填充区域、边框区域和外边距区域。
.box {
width: 200px;
height: 100px;
padding: 10px;
// 填充区域
border: 1px solid black;
// 边框区域
margin: 15px;
// 外边距区域
}
</
pre>在上面的代码中，.box类定义了一个200px*100px的盒子。padding属性指定了盒子内内容和边缘之间的填充区域大小。border属性指定了盒子的边框样式，宽度和颜色。margin属性设置了盒子与其他元素之间的空间。
在CSS中，盒子模型有两种模式：标准模式和怪异模式。标准模式符合W3C的规范，而怪异模式则是一种兼容老的浏览器的模式。
在标准模式下，盒子的宽度和高度只计算内容区域，而在怪异模式下，盒子的宽度和高度包括填充区域和边框区域。
box-sizing: content-box;
/*标准模式*/
box-sizing: border-box;
/*怪异模式*/
上述代码中的box-sizing属性用来定义盒子的模式。
