content-box 是什么？就是浏览器“默认怎么算宽高”
当你没写 box-sizing，浏览器就用 content-box —— 这不是某种特殊模式，而是 CSS 的原始设定。它意味着：你写的 width: 200px，只管内容区那块空白，不管 padding 和 border。哪怕加了 padding: 10px 和 border: 3px，元素在页面上实际占的宽度还是：200 + 10×2 + 3×2 = 226px。
为什么 content-box 容易导致布局错乱？
常见错误现象：
- 设了
width: 50%的两个并排盒子，结果因为 padding/border 撑出父容器，换行了 - Flex 容器里子项用
flex: 1，但加了padding后内容被挤窄、文字换行 - 响应式断点下，本该刚好填满的卡片突然溢出滚动条
根本原因：你控制的是“内容尺寸”，但视觉上要对齐的是“边框外沿”。两套尺寸系统混用，等于靠心算布局。
如何验证当前元素是否在 content-box 模式？
打开浏览器开发者工具（F12），选中元素，在 Styles 面板里搜 box-sizing。如果没有这一行，或显示为 content-box，那就确认是默认模式。也可以用 JS 快速检测：
Wjs Localizing Video
下载
用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...
立即学习“前端免费学习笔记（深入）”；
getComputedStyle(document.querySelector('.my-el')).boxSizing
// 返回 "content-box" 或 "border-box"
注意：boxSizing 是 JS 属性名（驼峰），CSS 里是连字符写法 box-sizing。
content-box 不该被“淘汰”，但必须被“意识到”
它不是 bug，是设计选择 —— 尤其适合需要精确控制内容区域尺寸的场景，比如：
- 文本编辑器内联高亮（padding 用于留白，width 要严格匹配字符宽度）
- Canvas 或 SVG 容器，内容渲染逻辑依赖 content 尺寸
- 某些动画库（如 GSAP）基于 content 区做 transform 基准
真正危险的，是“不知道自己在 content-box 下，还当它是 border-box 用”。全局重置为 border-box 是行业惯例，但理解 content-box 才能读懂老项目、调试异常尺寸、甚至反向利用它做微调。
