CSS2与CSS3盒模型默认尺寸计算规则一致，均为content-box：width/height仅指内容区，实际宽高=width+padding+border；box-sizing是CSS3新增开关，用于主动选择border-box等模式。
CSS2 与 CSS3 在盒模型尺寸计算上**没有本质升级**——box-sizing 是 CSS3 引入的控制项，但它解决的不是“计算规则升级”，而是**给你主动选择用哪套规则的权利**。默认行为（content-box）从 CSS2 到现在一模一样，真正变化的是你能否绕过它。
为什么说 width/height 的默认含义没变？
CSS2 规范就已明确定义：width 和 height 只作用于 content 区域。这个逻辑被完整继承到 CSS3，至今仍是浏览器默认行为。所谓“CSS3 盒模型”，其实是社区对 box-sizing: border-box 的俗称，它并非新标准替代旧标准，而是一个开关。
- 写
width: 200px; padding: 10px; border: 1px solid #000，无论 CSS2 还是 CSS3，默认都渲染成 222px 宽 -
box-sizing: border-box是 CSS3 新增属性，但它只是把“200px”重新解释为“content + padding + border 的总和” - 浏览器不会因为你用了 CSS3 就自动切到 border-box；不显式声明，永远是 content-box
box-sizing: border-box 在实际项目中怎么用才不翻车？
它不是“用了就稳”，关键在**统一性和边界意识**。很多团队加了全局重置却依然出问题，是因为漏掉了几个典型场景：
- 表单控件（
input、textarea、select）在部分浏览器里默认是border-box，但行为不一致；建议显式设一遍 - 使用
iframe或第三方组件时，它们可能自带样式重置，覆盖你的全局设置 - 当元素同时有
min-width/max-width时，border-box下这些限制仍以“总宽度”为基准，容易误判溢出条件 - Flex/Grid 容器的子项若设了
flex-basis，它优先级高于width，此时box-sizing对 flex-basis 无影响
遇到 width 算不准，第一反应不该是查 CSS3 新特性
90% 的“尺寸不符预期”问题，根源是忘了算 padding 和 border，而不是版本差异。调试时直接打开开发者工具的“Computed”面板，看 width 旁边那行 “used width: xxx px”——它才是真实占位，比手动加减更可靠。
- Chrome/Firefox 的盒子模型可视化工具（Elements → Styles → 右侧 Layout 面板）会用不同色块标出 content/padding/border/margin，比背公式直观得多
- 如果设计稿给的是“卡片总宽 400px”，你就该写
width: 400px; box-sizing: border-box;，而不是纠结“CSS3 是不是改了算法” - 注意：某些老项目用
* { box-sizing: border-box; }但漏写了html或body，导致根容器仍走 content-box，引发整页缩放错位
真正容易被忽略的，是那些没被 box-sizing 覆盖的“隐性尺寸贡献者”：比如 outline 不参与盒模型计算，但会视觉溢出；transform: scale() 改变渲染尺寸却不影响布局流；还有字体度量（ascent/descent）导致的行高撑开——这些从来就不在 box-sizing 的管辖范围里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
