input 的 size 属性仅控制初始渲染时大致可显示的等宽字符数，不控制像素、百分比或css单位，不响应缩放、不限制输入长度、不随字体变化调整；直接写 width 失效因 input 默认为内联元素且未设 box-sizing: border-box；响应式推荐 width: 100%; max-width: 400px; box-sizing: border-box；自适应宽度需 js 动态测文本宽度并处理字体加载延迟。
input 的 size 属性到底控制什么
它不控制像素、百分比或任何 CSS 单位，只表示「在当前字体下，大致能显示多少个等宽字符」——比如 size="10" 在多数场景下能塞下 10 个英文字符，但一个汉字可能占 1.5~2 个单位，实际显示常只剩 5~6 个。这个值仅影响初始渲染宽度，不响应缩放、不约束输入长度、不随字体变化调整。
常见错误现象：size="8" + 中文 placeholder 导致后半段被直接砍掉；size="20" 在移动端横屏时突然变窄，文字溢出不可见；给 type="date" 或 type="number" 加 size 完全无效（浏览器直接忽略）。
为什么直接写 width 样式经常失效
<input> 是内联元素，默认不认 width 和 height，除非显式声明 display: inline-block 或 display: block。更隐蔽的问题是：即使写了 width: 200px，若没配 box-sizing: border-box，padding 和 border 会额外撑出宽度，导致实际占用超 200px。
实操建议：
- 始终加
box-sizing: border-box（全局重置或单条规则里写死） - 避免只设
height：用padding控制视觉高度更稳，比如padding: 8px 12px -
type="number"要小心右侧箭头：Chrome/Firefox 默认加了appearance: auto，会挤占可用宽度，需手动清掉
响应式与流体布局下的宽度写法
固定 width: 300px 在移动设备上大概率溢出，而单纯 width: 100% 又容易在窄容器里被 padding 撑破。真正可用的组合是：
width: 100%; max-width: 400px; box-sizing: border-box;
注意两点：
- 父容器必须有明确宽度（不能是
display: inline或未设宽的 flex 容器） - 在 Flex 布局中，
flex: 1必须配合min-width: 0，否则 Chrome 下type="date"会锁死最小宽度约 130px - 需要精确对齐时，用
width: clamp(200px, 80%, 600px)比 media query 更轻量
想让输入框随内容自动伸缩？JS 是唯一靠谱方案
CSS 没有原生「根据文本长度自适应宽度」的能力。靠 size 或 ch 单位都只是估算，尤其中英文混排时偏差明显。真实项目里，只有监听 input 事件 + 动态测文本宽度才可靠。
关键点：
- 用
input事件而非keyup：支持中文输入法的 composition 流程 - 测宽不能直接读
offsetWidth：得用隐藏<span></span>模拟同字体同样式，再取scrollWidth - 别忘了处理空值和 placeholder：空输入时回退到基础宽度（如
min-width: 80px）
最易被忽略的是字体加载延迟：如果用了 Web Font，JS 测宽要在字体就绪后执行，否则宽度计算失准。这点在首屏加载时特别明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
