标准盒模型的width仅含content，而IE盒模型的width包含content、padding和border；通过box-sizing属性可切换，推荐统一设为border-box以简化布局计算。
标准盒模型和IE盒模型的主要区别在于元素的宽度和高度如何计算，尤其是在包含 padding 和 border 的情况下。
在标准盒模型中，元素的 width 和 height 只包含 content 部分，不包括 padding、border 和 margin。
也就是说，当你设置一个元素为：
width: 200px;那么该元素实际占用的宽度是：
立即学习“前端免费学习笔记（深入）”；
200px（内容） + 2×10px（左右内边距） + 2×5px（左右边框） = 230pxIE盒模型在早期版本的Internet Explorer中使用，其特点是：设置的 width 包含了 content、padding 和 border。
例如，同样设置：
width: 200px;在IE盒模型下，content 的实际宽度会被压缩为：
200px - 2×10px - 2×5px = 170px即 padding 和 border 是“包含在” width 内部的。
CSS 提供了 box-sizing 属性来控制盒模型的计算方式：
推荐在项目中统一设置：
*, *::before, *::after {这样可以避免布局计算混乱，尤其在响应式设计中更易控制尺寸。
基本上就这些。两种模型本质不同在于 width 的含义，而通过 box-sizing 可以自由选择使用哪种模型。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
161
收藏
