input无原生自适应宽度，需依场景选CSS百分比、size属性或JS动态测宽；表格中width:100%失效主因是box-sizing非border-box及table-layout未设fixed。
直接说结论：input 标签没有真正的“自适应宽度”原生能力，所谓“自适应”，本质是三种不同策略的取舍：用 CSS 百分比做响应式缩放、用 size 属性粗略匹配字符数、或用 JavaScript 动态测量文本宽。选错方案，移动端就溢出、中英文混输就卡顿、换字体就错位。
为什么 width: 100% 在表格里经常失效
常见现象：给 input 加了 width: 100%，但父 <td> 缩小后它还是撑破容器、出现横向滚动条。
根本原因不是 CSS 写错了，而是默认 box-sizing 是 content-box，而 padding 和 border 会额外加在 100% 宽度之外；再加上某些浏览器对 <table> 单元格的 min-width 保护机制，导致强制最小宽度生效。
- 必须显式写
box-sizing: border-box，否则width: 100%不包含内边距和边框 - 表格单元格需配合
table-layout: fixed+width指定列宽，否则浏览器按内容自动计算，CSS 宽度会被忽略 -
input在<td>中默认 vertical-align 是 baseline，可能引发行高计算偏差，建议统一设为vertical-align: middle
size 属性不是像素控制，别当 width 用
看到 size="20" 就以为等于 200px？这是最常踩的坑。它只表示“当前字体下约能显示多少个等宽字符”，实际渲染受 font-family、font-size、DPI 缩放、甚至系统中文输入法候选框干扰。
立即学习“前端免费学习笔记（深入）”；
典型错误场景：在响应式页面里同时设 size="30" 和 width: 100% —— 后者会覆盖视觉效果，但 DOM 里仍保留 size，旧脚本可能误读导致逻辑错乱。
-
size值是纯数字，不能带单位（size="20px"无效） - 未设置时浏览器默认
size="20"，但不可依赖，尤其在 iOS Safari 中表现不稳定 - 仅适合静态表单（如固定长度的身份证号输入框），不适合动态内容或中英文混合输入
JavaScript 动态测宽要防中文输入法陷阱
用 input 事件监听值变化再调 textWidth() 测量，看似合理，但在中文输入法下：用户敲拼音时 input.value 还是空或拼音串，真正上屏要等 compositionend；只监听 input 会导致宽度反复收缩又拉长，体验卡顿。
正确做法是组合监听：既要 input（处理英文/直接粘贴），也要 compositionstart（冻结宽度）和 compositionend（恢复并重算）。
- 避免用
<pre>测宽：它依赖等宽字体假设，遇到font-family: "PingFang SC", sans-serif就不准 - 推荐用
getBoundingClientRect().width+ 临时<span>渲染，样式完全继承原input的font、padding、border - 务必加防抖（
setTimeout延迟 0ms 或 requestAnimationFrame），否则快速连打触发上百次重排
最简可行方案：CSS 优先，JS 仅兜底
90% 的响应式需求，靠纯 CSS 就够了——前提是放弃“每个字都占精确像素”的执念。移动端真正需要的是：控件不溢出、文字可读、操作区留白足够。
推荐组合：
- 基础类
.form-control { width: 100%; box-sizing: border-box; padding: 8px 12px; } - 表格中额外加
td { width: 25%; max-width: 200px; }控制列宽上限 - 仅对关键输入框（如搜索框、长 placeholder 输入项）加 JS 动态逻辑，其他一律 CSS
复杂点在于：动态测宽的 JS 逻辑必须单独封装，不能和布局 CSS 耦合；而表格内嵌表单的响应式，永远要先 fix table-layout 和 min-width，再谈 input 宽度——这点最容易被忽略。
