rows和cols是语义提示值而非尺寸控制指令，其渲染高度宽度受字体、字号、line-height等影响极大，中文场景下尤其不可靠；应优先用css的width、min-height、resize等属性实现精确可控布局。
rows 和 cols 不是尺寸控制手段，而是语义提示值——它们只告诉浏览器“大概想看几行、多宽”，但不保证渲染结果，也不参与 CSS 盒模型计算。
为什么 rows="5" 渲染出来根本不是 5 行高度
rows 的计算依赖默认字体的行高（line-height）和字符基准高度，完全忽略 padding、border、自定义 font-size 或 font-family。比如：
- 设
rows="4"+font-size: 16px+line-height: 1.5→ 实际高度约 96px - 同是
rows="4"，换成font-size: 20px→ 高度可能跳到 130px，甚至触发滚动条 - 在 Flex 容器里，
rows对齐失效，上下间距错位，因为父容器按 CSS 规则分配空间，而rows不提供 layout 信息
为什么 cols="50" 在中文里最多塞 30 个字
cols 的单位是“等宽字符宽度”，默认按 Courier New 这类 monospace 字体估算：1 字符 ≈ 1 单位。但中文字体（如 Microsoft YaHei、SimSun）是比例字体，单个汉字宽度通常是英文字符的 1.8–2.2 倍。
-
cols="50"在英文环境下≈显示 50 字母 - 同一属性在中文环境下≈仅显示 23–30 个汉字（取决于字号、字重、浏览器渲染引擎）
- 改用
font-family: "Source Code Pro"后，cols才略微靠谱——但此时你已主动引入等宽前提，不如直接上 CSS
什么时候还能用 rows/cols？怎么设才不翻车
它们仍有存在价值，但仅限两个场景：辅助技术读取语义、极简表单 fallback。关键不是“能不能用”，而是“怎么用才不干扰视觉”。
- 保留
rows="4"和cols="50"作为基础语义值，供屏幕阅读器识别“预期输入规模” - 立刻用 CSS 覆盖视觉表现：
width: 100%+min-height: 80px+resize: vertical - 禁用拖拽时（
resize: none），必须同步设足够min-height，否则用户第一眼看不到完整 placeholder 或初始内容 - IE11 及更早版本不支持
min-height在textarea上生效，此时可设rows="3"作兜底，但避免rows="100"这类极端值——IE 下易引发换行错乱或滚动条偏移
CSS 替代方案必须带的三个属性
真正可控的尺寸管理，靠这组组合拳：
-
width: 100%：让宽度跟随容器，而非靠cols猜测字符数 -
min-height: 80px：保障初始可见区域，内容增多时自动撑开；别用height，会截断文字 -
resize: vertical：明确允许用户拉伸高度，同时禁止横向拉伸破坏布局
顺手加上 box-sizing: border-box，确保 padding 和 border 不撑破 width: 100%。如果要等宽对齐（如代码输入框），再加 font-family: monospace ——这时 cols 才有点参考意义，但也只是辅助。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
