rows和cols是字符单元格数而非像素值，仅按默认等宽字体估算初始尺寸，实际高度受font-size、line-height等影响，宽度随字体变化；现代项目应将其作为语义fallback，真实尺寸须由CSS的width、min-height、resize等控制。
rows 和 cols 是字符单元格数，不是像素值
直接写 rows="5" 或 cols="40" 不等于设置 5 行高或 40px 宽——它只是让浏览器按默认等宽字体（如 monospace）估算“大约能塞下 5 行文字”或“单行约容 40 个英文字符”。实际渲染高度受 font-size、line-height、padding 影响极大；宽度则随字体变窄（比如中文用 "Microsoft YaHei" 时，cols="50" 可能只显示 25 个汉字）。
为什么设了 rows="4" 却只看到 2 行？
常见原因不是属性写错了，而是 CSS 干扰了初始渲染：
- 写了
style="font-size: 18px"但没同步调大line-height，导致行高撑不开 - 父容器用了
flex或grid布局，cols被完全忽略，textarea被压缩成一条线 - 加了
height: 100px这类固定高度，直接覆盖rows的计算逻辑 - 用了自定义字体但没重置
font-family，浏览器仍按等宽字体估算，结果和视觉严重不符
现代项目里怎么安全用 rows/cols？
它们唯一靠谱的用途是提供语义 fallback（比如屏幕阅读器读出“4 行文本输入框”），真实尺寸必须靠 CSS 控制：
- 保留合理值作降级：比如
rows="4"+cols="30"，不写夸张值（如cols="1000"） - 用
width: 100%或具体像素控制宽度，别依赖cols - 用
min-height: calc(1.4em * 4)替代rows控制最小高度（把1.4em换成你实际的line-height） - 务必加
box-sizing: border-box，否则padding会让内容区变窄 - 需要用户可拉伸时加
resize: vertical；禁用拉伸时确保min-height足够，否则内容一多就溢出
动态改 rows 属性容易踩哪些坑？
JS 直接赋值 textarea.rows = 6 看似简单，但实际效果常不如预期：
立即学习“前端免费学习笔记（深入）”；
- 如果之前用 CSS 设了
height或min-height，这个赋值会被无视 - 改完
rows后没同步清理内联style.height，会导致后续自适应逻辑卡死 - 在 React/Vue 中绑定
rows属性，每次 re-render 都触发重排，滚动位置丢失 - 只改
rows没动cols，宽高比例突变，UI 显得奇怪
真正可靠的动态高度方案是监听 input 事件，读取 scrollHeight，再设 style.height —— 但记得先清除旧的 height 值，不然会锁死。
