标准盒子模型中width仅指内容区域，总尺寸需加上padding、border和margin；而IE模型中width包含content、padding和border，内容区会自动压缩。通过box-sizing属性切换：content-box为标准模型，border-box为IE模型，后者更利于固定布局，常被全局设置以简化计算。

css盒模型是前端布局的基础，标准模型与IE模型的核心区别在于 width 和 height 属性包含的范围不同，这直接影响元素最终占用的空间大小。

标准盒子模型（content-box）

这是W3C推荐的标准模型，现代浏览器默认使用此模型。在这个模型中：

• width 和 height 只表示内容区域（content）的尺寸。
• 元素的总宽度和高度需要额外加上内边距（padding）、边框（border）和外边距（margin）。
• 当你增加 padding 或 border 时，元素整体所占空间会变大，容易导致布局溢出容器。

总宽度 = width + 左右padding + 左右边框 + 左右margin
总高度 = height + 上下padding + 上下边框 + 上下margin

IE盒子模型（border-box）

这是早期internet Explorer浏览器使用的模型，也称为“怪异盒模型”。它的特点是：

• width 和 height 包含了内容（content）、内边距（padding）和边框（border）三部分的总和。
• 设置一个元素 width: 200px; 后，无论你如何调整 padding 或 border，这个元素从页面上看就是占据200px的宽度（不包括margin）。
• 内容区域会根据 padding 和 border 的大小自动压缩，更适合固定尺寸的布局。

width = 内容宽度 + 左右padding + 左右边框
总宽度 = width + 左右margin

如何切换两种模型

通过CSS的 box-sizing 属性可以自由控制元素使用哪种盒模型：

天工大模型

中国首个对标ChatGPT的双千亿级大语言模型

115

查看详情

立即学习“前端免费学习笔记（深入）”；

• box-sizing: content-box; 使用标准模型（默认值）。
• box-sizing: border-box; 使用IE模型，更便于控制整体尺寸。

很多开发者会在项目重置样式时统一设置 *, *::before, *::after { box-sizing: border-box; }，让所有元素都采用IE模型，避免计算困扰。

基本上就这些。

以上就是CSS盒模型中的标准模型与IE模型有什么