input 默认 display: inline，不支持 height，需显式设 display: block/inline-block、box-sizing: border-box，并配合 padding 控制总高；移动端须设 font-size≥16px 防缩放。
input 的 height 常常设不上去，不是 CSS 写错了，而是它默认是内联元素，不认 height ——必须先改显示模式。
为什么直接写 height: 40px 没反应
因为 <input> 是替换元素（replaced element），浏览器给它的默认 display 是 inline。而 inline 元素无视 height 和 width（除非用 line-height 配合单行文本“撑高”，但不可靠）。
- 检查 computed style，大概率看到
display: inline - 父容器用了
flex或grid时，input可能被隐式设为block，这时height才生效——但这属于布局副作用，不能依赖 - 某些 CSS 重置库（如 normalize.css）会主动设
input { display: inline-block; }，掩盖了问题
最稳的 height 控制写法
不用猜、不靠父容器、不赌浏览器行为：显式声明 display + box-sizing + padding 组合。
- 必须加
display: block或display: inline-block - 必须加
box-sizing: border-box，否则padding和border会让实际高度超出预期 - 别只靠
height，用height + padding控制视觉高度更准（比如height: 24px; padding: 8px 12px得到 40px 总高） - 对
type="number"，记得清除右侧箭头：appearance: none; -webkit-appearance: none;，否则箭头占空间，宽度/高度都偏移
input[type="text"] {
display: block;
box-sizing: border-box;
height: 24px;
padding: 8px 12px;
border: 1px solid #ccc;
}
移动端特别注意 font-size 和缩放
iOS Safari 会强制放大 font-size 的 <code>input，导致页面重排、键盘遮挡——这不是 bug，是辅助功能策略。
- 哪怕设计稿要求
font-size: 14px，也得写成font-size: 16px - 加
-webkit-text-size-adjust: 100%可防意外缩放，但不能替代字号设置 - 不要在
viewport里写user-scalable=no，现代浏览器已弃用且影响可访问性
input 能不能像 textarea 那样自动撑高
不能。单行输入框没有换行概念，scrollHeight 永远等于自身渲染高度，JS 监听 input 事件去设 height 是无效的。
- 试图给
input套textarea的自适应逻辑，只会得到一个永远不变的高度 - 真需要多行+自动高度，就该换用
textarea，并配resize: none; overflow: hidden;隐藏滚动条 -
height: fit-content对input完全无效，浏览器根本不支持这个值在表单控件上的计算
真正难的不是写对那几行 CSS，而是意识到：input 的高度控制本质是「对抗默认行为」，每一步都要显式覆盖，不能留任何默认值侥幸空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
