input默认不响应width:100%因其是内联元素，且不同type受浏览器特殊处理；根本原因是百分比需明确父容器宽度基准，而父容器常未撑开或存在table、flex、viewport、box-sizing等失效场景。
input 默认不响应 width: 100%，不是你写错了，是它天生就是内联元素，且浏览器对不同 type 的处理逻辑差异极大——比如 type="number" 的上下箭头会挤占空间，type="date" 则直接忽略 size 和部分 CSS 宽度声明。
为什么 width: 100% 经常没反应
根本原因在于：百分比宽度必须有明确的计算基准，而 input 的父容器常常“没撑开”。常见失效场景包括：
-
<td>没设width或未启用table-layout: fixed，导致子input的100%相对于一个塌缩宽度计算 -
<div>是display: inline或 flex 容器中未设min-width: 0，尤其在 Chrome 下type="date"会锁死约 130px - 缺失
<meta name="viewport">，移动端 Safari 按 980px 渲染，100%就按这个错值算 - 忘了加
box-sizing: border-box，padding和border会让实际宽度溢出父容器
最稳的 CSS 写法（兼容所有主流 type）
不依赖父级 flex/grid 布局，直接作用于 input 元素本身：
- 必须写
width: 100%+max-width: 300px（防大屏拉太宽） - 必须加
box-sizing: border-box，否则padding: 8px 12px会让总宽超出 100% - 视觉高度靠
height: 40px+padding控制，别只设height（line-height对type="number"不稳定） - 对
type="number"额外加appearance: none清除默认箭头，避免宽度被截断 - 对
type="date"必须加min-width: 0，否则 Chrome 强制最小宽度
嵌套 wrapper 时怎么让 input 锚定祖父容器
当 input 被包在一层绝对定位的 <div class="wrapper"> 里，而你想让它按外层 #container 的宽度缩放，传统 width: 80% 会失效——因为它是相对于 .wrapper 计算的，而 .wrapper 往往没有显式宽度。
立即学习“前端免费学习笔记（深入）”；
现代解法用 cqw 单位（CSS 容器查询宽度）：
- 给祖父容器加
container-type: inline-size（例如<div id="container" style="container-type: inline-size;">） -
input直接写width: 80cqw，等价于祖父容器宽度的 80% - 中间
.wrapper不用设宽、不用position: absolute干扰流式布局，保持display: inline-block即可 - 旧版浏览器 fallback：用 JS 监听
resize+getBoundingClientRect()手动设style.width
别踩 size 属性的坑
size 属性看着简单，但实际限制极多：
- 只对
type="text"、"email"、"password"等文本类生效，type="date"、"number"、"file"完全无视 - 单位是“平均字符宽度”，中文/emoji/字体粗细都会导致显示数量浮动，无法精确控制像素
- 和
CSS width同时存在时，CSS一定赢，size被覆盖却还留着冗余属性 - 响应式场景下完全不缩放，小屏上可能比屏幕还宽
真正需要字符级控制时，用 width: 20ch（1ch ≈ 数字 0 的宽度）更可控，且支持 max-width 和媒体查询。
