调整 | resize

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

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

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

初始值	none
适用元素	elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes
是否是继承属性	no
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

该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>

结果

规范

Specification	Status	Comment
CSS Logical Properties Level 1The definition of 'resize' in that specification.	Editor's Draft	Adds the values block and inline.
CSS Basic User Interface Module Level 3The definition of 'resize' in that specification.	Candidate Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support (on <textarea>)	1.0	4.0 (2.0)-moz	No support	12.1	3.0 (522)
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible)	4.0	5.0 (5.0)1	No support	15	4.0

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support (on <textarea>)	?	?	?	?	?
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible)	?	?	?	?	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18