标准盒模型和IE盒模型的主要区别在于width和height的计算方式不同，这直接影响元素最终占据的空间大小。
标准盒模型（W3C盒模型）
在标准盒模型中，元素的 width 和 height 只包含内容区域（content），不包括 padding、border 和 margin。
也就是说：
- 元素总宽度 = width + 左右padding + 左右border + 左右margin
- 元素总高度 = height + 上下padding + 上下border + 上下margin
例如：设置 width: 100px; padding: 10px; border: 5px solid; 实际宽度为 100 + 10*2 + 5*2 = 130px。
IE盒模型（怪异盒模型）
IE盒模型在早期版本的Internet Explorer中使用，其特点是 width 和 height 包含了 content、padding 和 border。
立即学习“前端免费学习笔记（深入）”；
即：
- 设置的 width 已经是 content + padding + border 的总和
- 实际内容区会根据 padding 和 border 自动压缩
例如：width: 100px; padding: 10px; border: 5px; 那么内容区实际只有 100 – 20 – 10 = 70px 宽。
如何切换盒模型类型
CSS 提供了 box-sizing 属性来控制盒模型行为：
- box-sizing: content-box; —— 使用标准盒模型（默认值）
- box-sizing: border-box; —— 使用IE盒模型逻辑，更便于布局控制
现代开发中，很多项目会全局设置
*, *::before, *::after { box-sizing: border-box; }
来统一计算方式，避免尺寸计算混乱。
基本上就这些。理解两者的差异有助于更好控制页面布局，尤其是在处理固定宽度容器时。