css2.1仅定义width/height作用于内容区（content-box），css3通过box-sizing提供主动控制权：content-box为默认行为，border-box使width/height包含padding和border，提升布局可控性。
CSS2.1 本身没有“盒模型”这个独立属性，它只定义了 width 和 height 默认作用于内容区域的计算规则——也就是所谓的「标准盒模型」；而 CSS3 引入的 box-sizing 才真正提供了对盒模型行为的显式控制能力。区别不在“两种模型并存”，而在于：CSS2.1 只有一种默认行为，CSS3 给你换算方式的主动权。
box-sizing: content-box 是 CSS2.1 的默认行为
这是你写 div { width: 200px; padding: 20px; border: 5px solid #000; } 时浏览器自然采用的规则：
-
width指的是内容区宽度，不包含padding和border - 元素实际占用的水平空间 =
200px + 2 × 20px + 2 × 5px = 250px - 如果你在响应式布局里反复调整
padding或border，就得同步改width，否则容易撑破容器 - 这种计算方式在表单控件（如
input、textarea）上尤其容易出问题——它们的默认box-sizing在不同浏览器中曾不一致
box-sizing: border-box 改变了 width/height 的语义
这不是新“模型”，而是把 width 重新定义为“整个边框盒的宽度”：
-
div { width: 200px; box-sizing: border-box; padding: 20px; border: 5px solid #000; }→ 实际内容宽度自动变成200px − 2×20px − 2×5px = 150px - 你声明的
width就是它最终占位的宽度，不再因padding或border变化而意外溢出 - 几乎所有现代 UI 框架（Bootstrap、Tailwind、Ant Design）都默认重置全局
box-sizing为border-box - 注意：
box-sizing不影响margin，外边距始终在盒子外部计算
兼容性与实际写法要注意这些坑
虽然 box-sizing 是 CSS3 属性，但它的支持度早已覆盖所有主流环境（IE8+），真正容易出错的是初始化写法：
- 别只给某个元素加
box-sizing: border-box，应该用通配符重置：* { box-sizing: border-box; }，但要小心第三方组件内部依赖content-box的场景 - 某些老版本 Safari 对
box-sizing在table元素上的表现不一致，如果用表格做布局，建议显式测试 -
inherit值很少用，但如果你在组件库中封装可复用的卡片类，父级设了box-sizing: border-box，子元素没声明时会继承——这点常被忽略 - Flex/Grid 容器的直接子项即使设了
box-sizing: content-box，其width在主轴方向仍可能被 flex 计算逻辑覆盖，此时box-sizing的效果会被弱化
真正关键的不是“哪个模型更先进”，而是你是否意识到：width 这个属性的含义，从 CSS2.1 到 CSS3，已经从“内容尺寸”变成了“可选解释的尺寸”。要不要让 padding 和 border 吃掉 width，现在由你决定，而不是由浏览器默认规则替你决定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
