size属性控制可显示字符数而非像素宽度，基于字体字号估算宽度但不可控；精确宽度必须用CSS width实现。

HTML 中 input 的 size 属性到底控制什么？

size 属性不控制像素宽度，它控制的是「可显示字符数」——基于当前字体、字号下，一个等宽字符（如 "w"）所占的平均宽度。浏览器用这个数字估算输入框的渲染宽度，但实际像素值不可控，也不响应 CSS 单位（比如不能写 size="200px"）。

常见误解是把它当 width 用，结果在不同字体或缩放比例下，输入框忽宽忽窄，甚至文字被截断。

• size 值为纯整数，例如 <input size="30">
• 对 type="text" 和 type="search" 有效，对 type="number" 或 type="email" 行为一致，但对 type="password" 可能因掩码字符渲染差异导致视觉宽度略小
• 若同时设置 size 和 CSS width，CSS 会覆盖 size 的效果（现代浏览器中）

真正可控的宽度：用 CSS width 替代 size

要精确控制像素、百分比或视口单位宽度，必须用 CSS。这是唯一可靠的方式。

• 直接内联：<input style="width: 300px;">
• 更推荐类名控制：<input class="form-input">，配合

  `.form-input { width: 100%; max-width: 400px; }`

• 注意：box-sizing: border-box 应设为默认，否则 padding 和 border 会让实际内容区变窄
• 响应式场景下，width: 100% 配合父容器约束比固定 size 稳定得多

为什么 size 还没被废弃？兼容性和表单语义残留

它仍在 HTML 标准中，主要因为两个现实原因：

• 某些老旧 CMS 或表单生成器仍依赖 size 输出“看起来差不多”的输入框，尤其在无 CSS 环境（如邮件客户端内嵌表单）中作为降级 fallback
• size 是 HTML 表单的原生属性，与 maxlength 类似，属于语义层控制，而 CSS 是表现层——虽然实践中几乎没人靠它做语义表达
• 部分屏幕阅读器会读出 size 值（如 “text input, size thirty”），但用户感知极弱，不构成可用性依据

容易踩的坑：size 和 width 混用时的冲突

当两者共存且未明确优先级，行为取决于浏览器解析顺序和 CSS specificity，容易出现意外交互：

• Chrome/Firefox：CSS width 总是胜出；但若 CSS 是 width: auto 或未声明，则回退到 size 计算值
• IE11 及更早版本：size 有时会强行撑开容器，导致水平溢出
• 调试建议：在 DevTools 中检查 computed styles，看 width 最终值是否为 auto —— 如果是，说明 size 正在起作用，但你无法预测其像素结果
• 绝对不要写 <input size="50" style="width: 200px;"> 这类冗余组合，删掉 size 更干净

实际项目里，size 已基本失去实用价值。真正需要宽度控制时，只用 CSS；若只是想快速搭个原型且不关心一致性，size 能凑合，但别指望它跨设备稳定。