调整 | resize

resizeCSS设置元素是否可以改变大小，并且在任何方向上（一个或多个）都可以是这样。

/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* Global values */
resize: inherit;
resize: initial;
resize: unset;

语法

该resize属性从下面的列表中指定为单个关键字值。

值

none该元素不提供用户可控制的方法来调整其大小。

both该元素显示允许用户调整其大小的机制，可以在水平和垂直方向调整大小。

horizontal该元素显示允许用户在水平方向调整其大小的机制。

vertical该元素显示允许用户在垂直方向调整大小的机制。

block元素显示允许用户在块方向（水平或垂直，取决于writing-mode和direction值）调整它的机制。

inline该元素显示允许用户在内联中调整它的机制方向（水平或垂直，取决于writing-mode和direction值）。

注意： resize不适用于overflow属性设置为的块visible。

正式语法

none | both | horizontal | vertical

示例

禁用textareas的可调整性

在许多浏览器中，<textarea>元素的默认大小可以调整。您可以用resize属性覆盖此行为。

CSS

textarea {
  resize: none; /* Disables resizability */
}

HTML

<textarea>Type some text here.</textarea>

结果

使用任意元素调整大小

您可以使用该resize属性来调整任何元素的大小。在下面的示例中，可调整大小的<div>框包含可调整大小的段落（<p>元素）。

CSS

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

HTML

<div class="resizable">
  <p class="resizable">
    This paragraph is resizable in all directions, because
    the CSS `resize` property is set to `both` on this element.
  </p>
</div>

结果

规范

浏览器兼容性