标准盒模型的width仅含content，而IE盒模型的width包含content、padding和border；通过box-sizing属性可切换，推荐统一设为border-box以简化布局计算。
标准盒模型和IE盒模型的主要区别在于元素的宽度和高度如何计算，尤其是在包含 padding 和 border 的情况下。
标准盒模型（W3C盒模型）
在标准盒模型中，元素的 width 和 height 只包含 content 部分，不包括 padding、border 和 margin。
也就是说，当你设置一个元素为：
width: 200px;padding: 10px;
border: 5px solid #000;
那么该元素实际占用的宽度是：
立即学习“前端免费学习笔记（深入）”；
200px（内容） + 2×10px（左右内边距） + 2×5px（左右边框） = 230pxIE盒模型（怪异盒模型）
IE盒模型在早期版本的Internet Explorer中使用，其特点是：设置的 width 包含了 content、padding 和 border。
例如，同样设置：
padding: 10px;
border: 5px solid #000;
在IE盒模型下，content 的实际宽度会被压缩为：
200px - 2×10px - 2×5px = 170px即 padding 和 border 是“包含在” width 内部的。
如何切换盒模型？
CSS 提供了 box-sizing 属性来控制盒模型的计算方式：
- box-sizing: content-box; — 使用标准盒模型（默认值）
- box-sizing: border-box; — 使用IE盒模型，width 和 height 包含 content、padding 和 border
推荐在项目中统一设置：
*, *::before, *::after {box-sizing: border-box;
}
这样可以避免布局计算混乱，尤其在响应式设计中更易控制尺寸。
基本上就这些。两种模型本质不同在于 width 的含义，而通过 box-sizing 可以自由选择使用哪种模型。
