cols和rows不是像素单位，仅为基于字符单元的粗略提示；精确控制须用css的width、min-height等属性，rows/cols仅作语义fallback和form.reset()回退依据。
cols 和 rows 不是像素单位，不能“精确控制大小”，它们只是基于字符单元的粗略提示——cols 表示单行大约能显示多少个英文字符宽度，rows 表示大约能显示几行文本。想靠它们做响应式或设计对齐，大概率会翻车。
为什么设了 cols="50" 宽度还是不对
浏览器用默认等宽字体（如 monospace）和当前字号估算宽度，非等宽字体（比如 sans-serif）下，cols="50" 可能只撑开 30 多个汉字；移动端 Safari 甚至直接忽略 cols，只按父容器宽度渲染。
- 别把
cols当 CSS 的width，它不参与盒模型计算，边框、内边距会让实际宽度溢出 - 要可靠控制宽度，必须用 CSS：
width: 100%或具体像素值 +box-sizing: border-box - 如果还要兼容表单重置（
form.reset()），保留cols作为语义 fallback，但尺寸逻辑全交给 CSS
rows 设了 6 行，为啥一输入就缩成 2 行
因为 rows 只影响初始渲染高度，不设最小高度。内容少时，textarea 会随内容收缩；内容多时又出现滚动条遮挡——这不是 bug，是它的设计行为。
- 真正稳住高度得靠
min-height，比如min-height: calc(1.2em * 6)（前提是line-height: 1.2） - 加
resize: vertical允许用户手动拉伸，但禁用resize: both，否则可能破坏布局流 - 删掉
rows改纯 CSS？不行——屏幕阅读器依赖它判断多行语义，且form.reset()会回退到 HTML 属性值，不是样式值
JS 动态改 rows 时最常踩的坑
用 JS 修改 textarea.rows 看似简单，但类型处理不当会直接导致逻辑断裂。
-
el.rows = "6"能写入，但后续el.rows += 2会变成字符串拼接："62"而不是8 - 安全写法始终用数字：
el.rows = 6；读取后参与计算前先转：Number(el.rows) + 2 - 别混淆
el.rows和el.style.height：前者是 HTML 属性，影响语义和重置行为；后者是内联样式，只管视觉 - 监听
input自动撑高时，优先用scrollHeight计算真实内容高度，比单纯累加rows更准
真正难搞的不是怎么设，而是意识到 cols/rows 本质是语义层的“建议值”，不是样式层的“控制指令”。越想靠它们做精细布局，越容易被字体、DPI、浏览器差异拖垮。CSS 控高宽 + JS 补动态 + HTML 属性保语义，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
