textarea 的 rows 和 cols 按字符格子数而非像素控制可见尺寸，依赖等宽字体假设，易受字体、浏览器差异影响，且会被 css 覆盖；现代开发应优先使用 css（如 ch 单位、min-height、width）实现响应式控制。
rows 和 cols 是按字符格子数，不是像素值
textarea 的 rows 和 cols 属性控制的是“可见行数”和“每行可见字符数”，底层基于字体的等宽假设（尤其依赖 monospace 字体表现），不是 CSS 中的像素或 em 单位。这意味着：
• rows="5" 表示默认显示 5 行文本区域，但用户仍可滚动输入更多行；
• cols="40" 表示在当前字体下，大约能并排显示 40 个 ASCII 字符宽度（中文字符通常占 2 倍宽度，实际显示可能少于 40 个汉字）；
• 这两个属性会被 CSS 的 width 或 height 覆盖——只要设置了 style="height: 100px"，rows 就失效。
用 CSS 替代 rows/cols 才能真正响应式控制大小
纯靠 rows 和 cols 无法适配不同屏幕、字体或缩放级别。真实项目中应优先用 CSS：
- 用
min-height+max-height+resize: vertical实现弹性高度； - 用
width: 100%或max-width控制水平尺寸，避免溢出父容器； - 若需保留“字符数感”，可用
ch单位：例如width: 40ch≈ 等于 40 个 '0' 字符宽度，比cols="40"更可靠； - 注意
box-sizing: border-box必须显式设置，否则 padding 会撑大实际尺寸。
浏览器对 cols 的渲染差异很常见
Chrome、Firefox、Safari 对 cols 的计算逻辑不完全一致，尤其在非等宽字体（如 system-ui）下：
- 设置
font-family: sans-serif后，cols="30"在 Firefox 可能显示 28 个字符，Chrome 显示 32 个； - 移动端 Safari 有时忽略
cols，直接按父容器宽度撑开； - 如果 textarea 内容含长英文单词或 URL，
cols不影响换行行为——是否折行取决于white-space和word-break。
rows="0" 或 cols="-1" 无效，不要这么写
rows 和 cols 是非负整数属性，浏览器会自动修正非法值：
-
rows="0"→ 被当作rows="2"（最小默认值）； -
cols="-1"或cols="auto"→ 被忽略，回退到浏览器默认（通常是 20）； - 想“清空尺寸控制”？直接删掉这两个属性，交由 CSS 全权管理更干净。
rows 和 cols 最适合快速原型或无样式的简单表单；一旦需要精确尺寸、多端适配或动态调整，立刻切到 CSS 控制——它们本质是历史遗留的粗粒度提示，不是现代布局工具。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
