box-sizing: content-box是css2默认盒模型，width/height仅指内容区，总宽=width+左右padding+左右border；border-box则使width/height表示含padding和border的总占位尺寸，内容区自动收缩，margin在两种模式下均不参与计算。
box-sizing: content-box 就是 CSS2 默认盒子模型
没有“本质不同”，box-sizing: content-box 就是 CSS2 时代定义的标准盒子模型，也是所有浏览器的默认值。它规定：width 和 height 只控制内容区尺寸，padding 和 border 必须额外加进去——总宽度 = width + 左右 padding + 左右 border。
box-sizing: border-box 改变了 width/height 的语义
这不是新增一种“模型”，而是把 width 和 height 的含义从“内容宽高”切换为“含边框的总宽高”。关键变化在于：
-
width: 300px在border-box下 = 内容区 + 左右padding+ 左右border总和为 300px - 内容区会自动收缩，而不是撑开父容器
-
margin在两种模式下都不参与width/height计算，这点始终不变
为什么老项目在现代浏览器里“变窄”了
不是浏览器变了，是开发者长期依赖 IE5.5–6 怪异模式（即 border-box 行为），却没在 CSS 中显式声明 box-sizing。结果：
- 旧 IE：没声明也按
border-box算 → 元素刚好填满 - Chrome/Firefox：默认
content-box→width: 100%+padding: 16px直接溢出 - 现象是“变窄”，其实是现代浏览器终于按标准执行了
calc() 和 box-sizing 的配合最容易踩坑
calc() 的结果是最终传给 width 的值，它不感知盒模型；真正起作用的是后续的 box-sizing 解析逻辑：
-
width: calc(100% - 40px); box-sizing: border-box;→ 这 40px 是留给 margin 或间隙的，padding/border不用再扣 -
width: calc(100% - 40px); box-sizing: content-box;→ 实际总宽还要再加padding和border，很可能又超了 - 最常犯的错：在
border-box下还手动calc(100% - padding - border)，等于扣了两遍
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
