标准盒子模型中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 时，元素整体所占空间会变大，容易导致布局溢出容器。
总高度 = height + 上下padding + 上下边框 + 上下margin
IE盒子模型（border-box）
这是早期Internet Explorer浏览器使用的模型，也称为“怪异盒模型”。它的特点是：
- width 和 height 包含了内容（content）、内边距（padding）和边框（border）三部分的总和。
- 设置一个元素 width: 200px; 后，无论你如何调整 padding 或 border，这个元素从页面上看就是占据200px的宽度（不包括margin）。
- 内容区域会根据 padding 和 border 的大小自动压缩，更适合固定尺寸的布局。
总宽度 = width + 左右margin
如何切换两种模型
通过CSS的 box-sizing 属性可以自由控制元素使用哪种盒模型：
立即学习“前端免费学习笔记（深入）”；
- box-sizing: content-box; 使用标准模型（默认值）。
- box-sizing: border-box; 使用IE模型，更便于控制整体尺寸。
很多开发者会在项目重置样式时统一设置 *, *::before, *::after { box-sizing: border-box; }，让所有元素都采用IE模型，避免计算困扰。
基本上就这些。
