CSS怎么设置textarea宽高？

CSS怎么设置textarea宽高？新手也能快速上手的实用技巧

在网页开发中，textarea是表单里的“信息输入大户”，不管是用户留言、反馈还是评论，都靠它承接。但很多新手常会遇到一个问题：明明给textarea设了宽高，页面显示却完全不对？其实只要掌握CSS的正确用法，就能轻松搞定这个元素的尺寸控制。

基础宽高设置：width与height的核心用法

控制textarea宽高的核心属性是`width`（宽度）和`height`（高度），和普通元素的尺寸设置逻辑一致，但要注意它的特性。比如要设置一个宽度300px、高度150px的输入框，代码可以这么写： css textarea { width: 300px; /* 固定宽度 */ height: 150px; /* 固定高度 */ } 需要注意的是，默认的textarea会自带内边距（padding）和边框（border），如果只设宽高，实际显示的尺寸可能会比预期大——这是因为默认的盒模型是`content-box`，内边距和边框会额外占据空间。

解决默认样式干扰：盒模型的调整技巧

很多新手会发现，设置了宽高后，textarea的尺寸还是“不对劲”，问题大概率出在盒模型上。为了让设置的宽高包含内边距和边框，我们可以把盒模型改成`border-box`，这样实际显示的尺寸就会和设置的一致： css textarea { box-sizing: border-box; /* 让宽高包含内边距和边框 */ width: 300px; height: 150px; padding: 10px; /* 内边距不会撑大元素 */ border: 1px solid #ccc; } 同时，textarea默认带有可拖拽调整大小的属性，如果不想让用户手动改变尺寸，可以加上`resize: none;`来禁用拖拽。

响应式适配：让textarea适配不同设备

现在的网页都讲究响应式，textarea的宽高也需要适配手机、平板等不同设备。比如可以用百分比宽度让它适配父容器： css textarea { width: 100%; /* 宽度占满父容器 */ max-width: 600px; /* 限制最大宽度，避免太宽 */ height: 120px; } 也可以结合媒体查询，在不同屏幕尺寸下调整高度： css @media (max-width: 768px) { textarea { height: 100px; /* 手机端降低高度 */ } }

相关问题及解答

1. 问题：为什么给textarea设了width: 100%后，它会超出父容器？ 解答：这是因为默认盒模型是content-box，textarea自带的内边距和边框会额外增加宽度。只需加上`box-sizing: border-box;`，就能让宽度包含内边距和边框，避免超出。

2. 问题：textarea的高度能不能根据内容自动调整？ 解答：CSS本身无法实现自动适配内容高度，需要结合JavaScript监听输入事件，动态调整高度。比如监听input事件后，将textarea的高度设为其内容的scrollHeight，就能实现高度随内容变化。

3. 问题：设置了width和height后，textarea的文字显示不全怎么办？ 解答：首先检查是否设置了过小的内边距或字号，也可能是行高（line-height）不合适。调整line-height为合适值，或适当增加height，同时确保盒模型设置正确，就能解决文字显示不全的问题。

标签： CSS怎么设置textarea宽高