css调节输出框大小

CSS可以用来精确地控制HTML元素，包括输出框（也称为`<textarea>`元素），其大小可以通过设置宽度（width）和高度（height）属性来调整。下面是一些常用的方式：

1. 直接指定尺寸：

   textarea {
       width: 400px; /* 水平宽度 */
       height: 200px; /* 垂直高度 */
   }

2. 使用百分比：
如果你想让输出框随着容器自动调整大小，可以使用百分比单位：

   textarea {
       width: 95%; /* 宽度占容器宽度的95% */
       max-width: 600px; /* 设置最大宽度以防撑破 */
       height: auto;
   }

`height: auto`会让文本区域的高度自适应内容。

3. 使用`min-height`和`max-height`：
这样可以提供最小和最大限制：

   textarea {
       min-height: 100px;
       max-height: 300px;
       resize: none; /* 可选，阻止用户改变高度 */
   }

4. 使用CSS Grid或Flexbox布局：
   对于更复杂的布局，你可以利用CSS Grid或Flexbox来控制行高列宽：

.container {
display: grid;
grid-template-columns: 1fr; /* 自适应宽度 */
grid-template-rows: 100px auto; /* 固定行高 + 自适应高度 */
}
textarea {
grid-column: 1;
grid-row: 2;
}