box-sizing对<img>生效而对多数表单元素无效，根本原因是<img>属CSS完全可控盒子，渲染由CSS引擎接管；而<input>、<select>等受浏览器UA样式深度接管，appearance未重置时box-sizing被忽略。
box-sizing 对 <img> 有效，但对多数原生表单元素（如 <input type="text">、<select>）无效 —— 根本原因不是“是否具有 intrinsic 尺寸”，而是“浏览器是否将该元素的渲染完全交由 CSS 盒模型控制”。
为什么 <img> 的 box-sizing 始终生效
<img> 是可替换元素，但它完全遵循 CSS 盒模型规范：它的 intrinsic 尺寸（原始像素宽高）仅作为 width: auto 或 height: auto 时的计算依据；一旦你显式设置 width 和 height（无论用 HTML 属性还是 CSS），后续所有盒模型行为（包括 box-sizing）就由 CSS 引擎接管。
-
<img src="a.jpg" width="200" height="100">+img { box-sizing: border-box; padding: 10px; border: 2px solid };→ 实际占用宽度 = 200px（含 padding + border） - 即使只设
width: 200px; height: auto;，box-sizing依然控制总尺寸，高度按比例缩放后也纳入 border-box 计算 - 验证方式：用开发者工具检查 computed styles，
box-sizing值可见且offsetWidth返回的是含 padding/border 的总宽
为什么 <input> 和 <select> 的 box-sizing 常被忽略
这些表单控件的渲染由操作系统原生控件或浏览器 UA 样式深度接管，CSS 只能“修饰”而非“重定义”其盒模型。即使你写了 box-sizing: border-box，浏览器仍可能把 padding 和 border 渲染在指定 width 外部。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 典型表现：
input { width: 100px; padding: 12px; border: 2px solid; box-sizing: border-box; }→ 实际宽度常为 128px（100 + 24 + 4），而非 100px - 根本限制：UA 默认样式中设置了
appearance: auto（或none未显式重置），导致底层控件不响应box-sizing - 并非所有表单元素都如此：
<textarea>和<input type="text">在现代 Chrome/Firefox 中已基本支持box-sizing，但<input type="button">、<select>仍不稳定
intrinsic size 不等于“绕过盒模型”
intrinsic size（内在尺寸）只是决定 width: auto 或 height: auto 的 fallback 值，并不豁免盒模型规则。真正决定 box-sizing 是否起效的，是元素是否被浏览器标记为“CSS 可完全控制的盒子”。
立即学习“前端免费学习笔记（深入）”；
-
<img>、<video>、<iframe>：可替换元素，但属于“CSS 完全可控盒子”，box-sizing生效 -
<input type="range">、<progress>：虽有 intrinsic size，但部分浏览器仍用 UA 控件渲染，box-sizing行为不一致 - 关键判断点：检查 computed
box-sizing值是否为border-box，再看offsetWidth是否等于你设置的width—— 不等，说明被 UA 绕过了
最容易被忽略的一点：不要假设“所有可替换元素都一样”。<img> 是特例，不是标准；而表单元素的 UA 接管程度，因浏览器和类型差异极大，必须实测，不能靠推理。
