content-box 是 width/height 仅控制内容区尺寸的默认盒模型，总宽高需加 padding 和 border；替换元素和 table 布局下行为特殊，需避免硬调 box-sizing。
box-sizing: content-box 是默认行为，但很多人误以为它“包含 padding”
浏览器对 width 和 height 的默认解释就是 content-box：你写的 width: 200px，指的**仅仅是内容区的宽**，不包括 padding、border、margin。这是最常被误解的一点——不是它“错了”，而是你写的时候没意识到它只管内容。
常见错误现象：div { width: 200px; padding: 10px; border: 1px solid #000; } 渲染出来实际占位是 222px（200 + 10×2 + 1×2），但开发者常以为“我设了 200，怎么变宽了？”
- 这个行为在所有现代浏览器中一致，无需兼容处理
- 当父容器宽度固定（比如
max-width: 600px），子元素用content-box+ 大 padding 容易触发水平滚动或换行 - Flex/Grid 容器中的子项仍受
content-box影响，flex-basis默认也是按内容区计算
什么时候必须坚持用 content-box？
多数 UI 组件库（如 Ant Design、Element Plus）内部会显式重置为 box-sizing: border-box，但有些场景你反而得“退回” content-box 才合理：
- 需要精确控制文字区域尺寸时（比如
textarea内容框，line-height和font-size对齐依赖纯内容高） - 做像素级动画或 canvas 坐标映射时，
getBoundingClientRect().width返回的是含 padding/border 的值，而你可能只想要内容区真实尺寸，这时需手动减去clientPaddingLeft等 - 某些 CSS-in-JS 库（如 Emotion）生成的样式若未全局重置
box-sizing，局部组件内用content-box反而是预期行为
content-box 下 width/height 的实际生效逻辑
width 和 height 在 content-box 模式下，仅决定内容区矩形大小；最终元素总尺寸 = width/height + padding × 2 + border × 2。注意几个细节：
立即学习“前端免费学习笔记（深入）”；
-
min-width/max-width同样只约束内容区，不是整个盒 - 百分比宽高（如
width: 50%）也是相对于父元素的content-box宽度计算，不含父级 padding - 使用
calc(100% - 20px)时，100% 是父内容宽，减去的 20px 是绝对值，结果仍是内容区宽 -
box-sizing不影响margin，它永远在 border 外
容易被忽略的边界情况：替换元素和 display: table
表单控件（input、select）、图片（img）、video 这类替换元素，即使设了 box-sizing: content-box，其 width 行为也可能和普通块元素不同——部分浏览器会把 border 和 padding “挤进”内容区，尤其在 display: inline 或 vertical-align 存在时。
display: table 及其子元素（table-cell）也存在类似表现：width 优先保证单元格最小内容宽度，content-box 的定义在这里变得模糊。
遇到这类问题，别硬调 box-sizing，先检查是否用了 display: table 或是否是替换元素；真要精确控制，改用 display: flex 或显式包裹一层 div 更可靠。
