CSS盒模型只有标准盒模型和IE盒模型两种，标准模型中width/height仅指内容区，总宽=content+padding+border；IE模型中width/height包含content、padding和border，内容区自动收缩；通过box-sizing属性切换：content-box为标准模型，border-box为IE模型。
CSS盒模型本质上只有两种：标准盒模型（W3C盒模型）和IE盒模型（又称“怪异盒模型”或“替代盒模型”）。它们不是并列的多个模型，而是同一套盒概念下的两种不同尺寸计算逻辑。
这是现代CSS的默认行为。当你写 width: 200px; padding: 10px; border: 5px solid; 时：
这是旧版IE（如IE5.5–6）在怪异模式下的行为，现在可通过 box-sizing: border-box 主动启用：
width: 200px 表示整个盒子（content + padding + border）总宽就是200pxbox-sizing 是控制盒模型行为的唯一CSS属性：
立即学习“前端免费学习笔记（深入）”；
box-sizing: content-box —— 标准盒模型（浏览器默认值）box-sizing: border-box —— IE盒模型语义* { box-sizing: border-box; }）早期浏览器渲染不统一，IE在“怪异模式”（触发条件如缺少DOCTYPE声明）下自动启用IE盒模型；而标准模式下，现代浏览器始终遵循W3C规范。如今已无真实“IE模式”，但box-sizing: border-box保留了其计算逻辑，成为响应式开发的事实标准。
以上就是css盒模型到底有哪几种_区分标准盒模型与IE盒模型的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
501
收藏
