input的width/height常失效因它是内联元素，需设display:block或inline-block；还易受父容器、默认样式、box-sizing及type=”number”箭头干扰；最稳写法是width:100%+max-width、height+padding+box-sizing:border-box。
input 标签的 width 和 height 为什么经常失效
因为 <input> 是内联元素，默认不响应 width 和 height，除非显式设置 display: block 或 display: inline-block。更常见的是被父容器、浏览器默认样式或 CSS 重置规则干扰。
- 检查是否被
box-sizing: border-box影响——如果 padding 或 border 太大，width: 200px实际内容区会变小 - 避免只写
width：配合height+line-height（对文本框）或padding（更稳妥）来控制视觉高度 - chrome/firefox 对
<input type="number">的箭头控件会挤占宽度，需用appearance: none+ 自定义样式清除
用 CSS 控制 input 宽高最稳的写法
直接作用于 <input> 元素，不依赖父容器 flex 或 grid 布局时，以下组合兼容性好、行为可预测：
-
width: 100%配合max-width: 300px（防拉伸过宽） -
height: 40px+padding: 8px 12px（比单设height更易对齐文字） - 必须加
box-sizing: border-box，否则 padding/border 会撑出额外尺寸 - 如需圆角和边框：用
border-radius: 4px和border: 1px solid #ccc，别依赖 outline
input[type="text"] { width: 100%; max-width: 300px; height: 40px; padding: 8px 12px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; }textarea 怎么调大小才不“跳”
<textarea></textarea> 默认可拖拽缩放，且 rows 和 cols 是 html 属性，CSS 的 width/height 会覆盖它，但容易导致滚动条突兀出现或文字截断。
- 禁用拖拽：加
resize: none - 固定尺寸优先用 CSS：
width: 100%+min-height: 100px，比rows="5"更可控 - 若保留自适应高度（如输入时自动撑开），不要设
height，改用min-height+max-height+overflow-y: auto - 注意
line-height和font-size匹配，否则光标位置和文字垂直居中会偏移
移动端 input 拉伸/缩放异常怎么修
ios safari 会自动放大显示「过小」的输入框（通常指 font-size ），导致页面重排、键盘遮挡，这不是 bug，是辅助功能策略。
立即学习“前端免费学习笔记（深入）”；
- 强制最小字号：
font-size: 16px（哪怕设计稿是 14px，也得妥协） - 禁用缩放（谨慎）：
user-scalable=no在 viewport meta 中已不推荐；更安全的是加-webkit-text-size-adjust: 100% - 避免用
transform: scale()调整 input 大小——会破坏点击热区和 focus 状态 - 真机调试时重点看
input:focus下的 zoom 行为，模拟器常不准
实际调尺寸时，最常漏掉的是 box-sizing 和字体大小约束，这两点一错，其他所有设置都会表现失真。