最可靠方式是用css的width/height配合box-sizing: border-box；否则padding和border会额外撑大尺寸，且需用padding+line-height控制文字垂直居中，避免仅依赖size属性或rows。
直接用 CSS 的 width 和 height 设置 input 尺寸最可靠
别依赖 size 属性——它只对 type="text" 和 type="search" 有模糊效果，且单位是“字符格”，不同字体下实际宽度浮动很大。真正可控的方式是写 CSS：
-
width和height必须配合box-sizing: border-box，否则 padding 和 border 会额外撑大尺寸 - 单独设
height容易让文字上下不对齐，建议改用padding（比如padding: 8px 12px）+line-height控制视觉高度 - 对
type="number"，Chrome/Firefox 默认右侧带微调箭头，会挤占宽度；得加appearance: none清掉，再手动补样式
textarea 高度不能只靠 rows，必须用 CSS height 或 resize
rows 是提示值，不是精确控制：浏览器按默认行高估算，但最终高度仍被 height、padding、font-size 覆盖。常见错误是只写 rows="6"，结果在移动端被父容器压缩变形。
- 要固定高度，直接写
style="height: 120px;"，比rows更稳定 - 要允许用户拖拽调整，必须同时满足：
resize: vertical（或both） +overflow: auto（不能是hidden） - 如果内容少但想强制显示多行空间，
min-height比height更安全，避免空时塌陷
响应式场景下 width: 100% 很危险，得加 max-width 保底线
写 width: 100% 看似省事，但一旦父容器没设宽（比如 flex item 或未定义 width 的 div），input 会无限拉伸甚至撑破布局。
- 稳妥写法是：
width: 100%; max-width: 400px;（数值按业务定） - 在表单里混用 label + input 时，label 若用了
display: block，input 的width: 100%才真正占满可用空间 - 移动端需注意：iOS Safari 对
width: 100%的计算偶尔偏窄，可加min-width: 280px防过小
字体大小变化时，input 高度必须同步重算
很多人只改 font-size 却忘了调高度，结果文字被截断或上下留白过大。CSS 中 font-size 改变后，line-height 和 padding 的像素值不变，但相对比例已失衡。
- 推荐组合：
font-size: 16px; line-height: 1.5; padding: 8px 12px;—— 这样文字居中且不溢出 - 若用 rem/em，确保根字号变化时，
padding和line-height也响应式缩放，否则高度会漂移 - 用
em单位写padding（如padding: 0.5em 0.75em）比固定 px 更适配字体缩放
box-sizing: border-box 和 resize 的 overflow 条件。这两点不处理，其他设置都可能白调。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
