CSS3 _ CSS resize

CSS resize

CSS中的resize属性是用来定义元素尺寸是否可变。

这是一个长宽可变的div元素，拖动右下角，可以改变元素的高度和宽度。
注意：IE浏览器并不支持resize属性。

下表是每种浏览器支持resize属性的最低版本。

属性
resize	4.0	15.0	5.0 4.0 -moz-	4.0	15.0

CSS中的resize属性是用来定义元素尺寸是否可变。其取值范围如下所示：

案例1：both

这是一个长宽可变的div元素，拖动右下角，可以改变元素的高度和宽度。
注意：IE浏览器并不支持resize属性。

元素长度和宽度都可以改变。

div {
    resize: both;
    overflow: auto;
}

案例2：vertical

这是一个只能改变高度的div元素，拖动右下角，可以改变元素的高度。
注意：IE浏览器并不支持resize属性。

元素竖直方向上尺寸可变，即高度可拖动改变。

div {
    resize: vertical;
    overflow: auto;
}

案例3：horizontal

这是一个只能改变宽度的div元素，拖动右下角，可以改变元素的宽度。
注意：IE浏览器并不支持resize属性。

元素水平方向上尺寸可变，即宽度可拖动改变。（特别注意：在元素高度没有定义特定取值时，有时会因为宽度的变化，造成元素内容排版改变，从而元素的高度也发送变化，这种情况看上去很像是horizontal取值没有生效的假象；遇到这种情况，如果想避免假象，可以提前给元素高度定义具体的值。）

div {
    resize: horizontal;
    overflow: auto;
}

案例4：none

这是一个尺寸不能拖拽改变的div元素，其实嘛，div元素默认就不能改变尺寸的。
注意：IE浏览器并不支持resize属性。

元素不可以被拖动改变。

div {
    resize: none;
}

案例5：限制textarea元素的尺寸可变

textarea元素默认就可以长宽可变，这里通过将其resize属性设置为none，从而其限制尺寸可变。

在绝大部分浏览器中，textarea元素的尺寸默认就是可变的，即resize属性默认取值both，因此，如果不希望textarea元素尺寸可变，则如案例4，把resize属性设置成none就ok啦~

textarea {
    resize: none;
}

考虑到浏览器兼容性问题，最佳实践方式是在CSS内部样式表或外部样式表中提前定义尺寸可变元素的长度和宽度属性。不建议在行内样式表中定义具体的长宽。