rows 和 cols 是近似值，非像素单位，仅按默认等宽字体下字符数估算；现代项目应优先用 css 控制尺寸，rows/cols 仅作语义 fallback；需配合 min/max-height、resize、box-sizing 等确保可预期、可扩展、可交互。
rows 和 cols 是近似值，不是像素单位
直接写 rows="5" 或 cols="40" 并不能精确控制高度或宽度——它们只是按“默认等宽字体下每行/每列的字符数”做的估算。比如 cols="40" 在 font-family: "Microsoft YaHei" 下实际显示宽度可能只有 300px 左右，而换成 font-family: monospace 就接近 40 个英文字符宽度。
常见错误现象：
- 中文输入时一行只能塞下 20 多个字，但
cols="50"让人误以为能填 50 个 - 改了
font-size: 16px后，rows="4"看起来只剩 2 行高 - 放在
flex容器里，cols完全被忽略，textarea 被压缩成一条细线
现代项目该用 CSS 控制尺寸，而非依赖 rows/cols
rows 和 cols 的唯一可靠用途是提供语义 fallback（比如屏幕阅读器读取初始行数），真实布局必须靠 CSS。固定写 style="height: 100px; width: 100%" 是危险的：height 会截断内容，width 在 flex/grid 中又容易失效。
推荐组合写法：
- 移除或仅保留合理 fallback 值，如
rows="4"、cols="30" - 用
width: 100%或具体像素值（如width: 500px）控制宽度 - 用
min-height: 80px+max-height: 200px控制高度范围，避免无限拉伸 - 加
resize: vertical允许用户手动调整，或resize: none禁用（此时必须确保min-height足够） - 务必加
box-sizing: border-box，否则 padding 会让实际内容区变窄
动态修改 rows 属性时容易踩的坑
JS 直接改 textarea.rows = 8 会触发重排，且只重算初始尺寸，不响应内容变化。更麻烦的是：如果之前用 CSS 设了 height，这个赋值会被完全忽略；如果同时写了 style.height，rows 就彻底失效。
典型问题场景：
- 表单验证失败后展开 textarea，只改
rows但没同步处理cols，导致宽高比例突变 - 用
scrollHeight实现自适应高度，但忘了先清除内联style.height，结果第一次 resize 后高度被卡死 - 在 React/Vue 中绑定
rows属性，每次 re-render 都触发重排，滚动位置丢失
兼容旧浏览器时 rows/cols 怎么设才不太翻车
IE11 及更早版本不支持 min-height 在 textarea 上生效，resize 也无效，这时 rows/cols 是唯一可控锚点，但不能乱设。
经验数值（需实测校准）：
-
rows="3"≈ 初始高度 60–75px（含默认 padding 和 line-height） -
cols="50"≈ 视觉宽度 300–400px（取决于系统默认字体） - 避免
cols="1000"这类极端值，IE 下可能错位或滚动条异常 - 若用了自定义字体，必须在 CSS 中同步声明
font-family和font-size，否则rows渲染失准
真正难的不是设几行几列，而是让初始尺寸可预期、内容增长不遮挡、用户还能自主调整——这三件事没法靠 rows/cols 单独搞定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
