Question

Html中怎么控制textarea控件的大小？ 是该用rows和cols呢，还是像其它控件那样用w

Html中怎么控制textarea控件的大小？ 是该用rows和cols呢，还是像其它控件那样用width和height？ 前者我试了，好像改变不了显示的大小。如果两种方法都可用，那么，二者有何区别？恳请高手指点！先谢谢啦！

Answer 1

用width和height控制外观的大小。。
rows和cols是受字体大小行高的影响。。

追问

问一下，为什么我用width和height，却改变不了外观的大小呢？

谢谢啦！我还有个疑问：textarea标签中的rows和cols属性到底起什么作用？要或者不要这两个属性，效果上有何区别？

追答

比如你的字体是20px。rows是10；那它的高度跟字体是12px的时候肯定是不一样的吧。。
rows只跟你的字体大小和行高有关系。如果不设置高度的话，相同的rows，字体越大，textarea会越高。。你可以试试看
cols也是一样的。
style="width:100px;height:100px;"
怎么不起作用？

追问

又试了一下，style="width:100px;height:100px;" 是起作用的。谢谢啦！
"你的字体是20px。rows是10；那它的高度跟字体是12px的时候肯定是不一样的吧。cols也是一样的。"能详细给我解释下你的意思吗？最好举个例子说明差别。给你好评啊！

追答

比如这样的一个textarea

文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容

开始如果没有对他进行任何样式上的设置。
那这个textarea的高度只有两行文字。超出2行的就出现滚动条。
那这个2行的高度是多少呢？
如果设置textarea里面的文字大小是12，line-height:18px，那大概看起来的高度就是2*18 = 36px

如果设置textarea里面的字体大小是20，line-height:40px，那大概看起来高度就是80px

可以试试下面的

文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容

文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容

直观的看到高度的不同，虽然设置的row和col是相同的