17370845950

标准盒模型的width仅含content，而IE盒模型的width包含content、padding和border；通过box-sizing属性可切换，推荐统一设为border-box以简化布局计算。

标准盒模型和IE盒模型的主要区别在于元素的宽度和高度如何计算，尤其是在包含 padding 和 border 的情况下。

标准盒模型（W3C盒模型）

在标准盒模型中，元素的 width 和 height 只包含 content 部分，不包括 padding、border 和 margin。

也就是说，当你设置一个元素为：

那么该元素实际占用的宽度是：

IE盒模型（怪异盒模型）

IE盒模型在早期版本的Internet Explorer中使用，其特点是：设置的 width 包含了 content、padding 和 border。

例如，同样设置：

在IE盒模型下，content 的实际宽度会被压缩为：

即 padding 和 border 是“包含在” width 内部的。

如何切换盒模型？

CSS 提供了 box-sizing 属性来控制盒模型的计算方式：

• box-sizing: content-box; — 使用标准盒模型（默认值）
• box-sizing: border-box; — 使用IE盒模型，width 和 height 包含 content、padding 和 border

推荐在项目中统一设置：

这样可以避免布局计算混乱，尤其在响应式设计中更易控制尺寸。

基本上就这些。两种模型本质不同在于 width 的含义，而通过 box-sizing 可以自由选择使用哪种模型。