box-sizing: content-box 是默认值但非安全起点，因 width/height 不含 padding 和 border，易致布局溢出；border-box 更可控，应全局重置并分层收敛，DOCTYPE 不影响其默认值。
box-sizing: content-box 是默认行为，但不是“安全起点”
很多人以为 content-box 是最稳妥的写法，毕竟它符合 W3C 标准、被所有现代浏览器原生支持。但问题在于：它让 width 和 height 只管内容区，padding 和 border 会额外撑开尺寸。这意味着你声明 width: 200px，加上 padding: 10px 和 border: 1px 后，实际占用宽度是 222px——这在栅格系统、固定容器或响应式断点里极易导致换行、溢出或对不齐。
常见错误现象：flex 容器内子项设了 width: 50% + padding，结果两列无法并排；或者用 calc(50% - 1px) 手动减去边框，维护成本高且易错。
- 真实使用场景：组件库封装、表单控件（input/button）、卡片布局、CSS Grid 子项
- 兼容性影响：IE8 不支持
box-sizing，但 IE9+ 和所有现代浏览器都支持；若需兼容 IE8，只能靠 JS 检测后动态补全或放弃精确尺寸控制 - 性能无差异：该属性不触发重排，纯渲染层计算
border-box 能直接对齐 IE6 怪异模式，但别误以为它是“降级方案”
box-sizing: border-box 的行为，确实和旧版 IE（IE5.5–IE7 在怪异模式下）一致：width 包含 padding 和 border。但这不意味着它是“向后兼容”的妥协写法——恰恰相反，它是现代布局更可控、更可预测的选择。
容易踩的坑：border-box 不会自动修复已有样式中的 calc() 表达式。比如原来写 width: calc(100% - 20px) 是为了抵消左右 padding，切换成 border-box 后，这个 calc 就可能过度收缩。
立即学习“前端免费学习笔记（深入）”；
- 迁移建议：全局重置时优先用
* { box-sizing: border-box; }，但要排除input[type="search"]等原生控件（部分浏览器对其有特殊渲染逻辑） - 注意继承链：
box-sizing默认不继承，必须显式设置或靠通配符覆盖 - 不要混用：避免同一项目中部分组件用
content-box、部分用border-box，否则尺寸推算逻辑分裂，调试成本陡增
DOCTYPE 声明决定浏览器解析模式，但它不影响 box-sizing 行为
很多人混淆了“文档模式”和“盒模型解析方式”。<!DOCTYPE html> 确保浏览器走标准模式（而非怪异模式），从而启用 CSS3 特性、正确解析 flex 和 grid，但它**不改变** box-sizing 的默认值——无论标准还是怪异模式，box-sizing 的初始值始终是 content-box。
关键区别在于：怪异模式下，块级元素的 width 本身就包含 padding 和 border（即隐式 border-box），而标准模式下需要显式声明。所以，即使你写了 <!DOCTYPE html>，如果不加 box-sizing: border-box，依然会按标准模型计算。
- 验证方法：打开开发者工具 → 查看元素 computed 样式 → 检查
box-sizing值是否为预期 - 不要依赖文档模式自动切盒模型：它只影响历史遗留行为（如表格布局、
vertical-align默认值），不接管box-sizing - 老项目迁移时，先确认当前是否已处于标准模式（检查控制台是否有 Quirks Mode 提示），再决定是否需同步调整
box-sizing
迁移不是全量替换，而是分层收敛
直接给整个项目加 * { box-sizing: border-box; } 看似省事，但会意外影响第三方库（如某些 UI 组件、图表库）的内部尺寸逻辑。更稳妥的做法是分层收敛：
- 基础层：重置常用容器（
div、section、article）、表单元素（input、textarea、select）和媒体元素（img、video） - 组件层：在组件 scoped style 或 BEM 命名空间内统一声明，例如
.card > * { box-sizing: border-box; } - 例外处理：对明确依赖
content-box行为的模块（如某段手写的 SVG 布局代码），用box-sizing: content-box !important局部覆盖
真正容易被忽略的是：box-sizing 对 min-width、max-width 和 fit-content 等约束类属性同样生效。如果你在响应式中用了 min-width: 300px 却没考虑 padding，那在小屏下仍可能溢出——这点比单纯 width 计算更隐蔽。
