css3中resize属性的作用详解（附代码）
CSS3中的resize属性可以控制元素是否可以调整大小。通常用于textarea和input[type="resizeable"]这类具有可编辑功能的元素中。
resize属性有以下四个取值：
none：表示元素不可调整大小；
both：表示元素可以在水平和垂直方向上调整大小；
horizontal：表示元素只能在水平方向上调整大小；
vertical：表示元素只能在垂直方向上调整大小。
示例代码：
html
<textarea class="resizeable"></textarea>
css
.resizeable {
resize: both;
}
上述代码中，将resize属性设置为both，即表示允许元素在水平和垂直方向上调整大小。
除了以上四种取值外，resize属性还可以设置初始大小、最小大小、最大大小。具体方法如下：
resize: both 300px 200px; /*初始大小*/
resize: both 50px 50%; /*最小和最大大小*/
上述代码中，“300px 200px”表示初始大小为300px x 200px，“50px 50%”表示最小大小为50px，最大大小为父容器宽度的50%。
不过需要注意的是，resize属性仅在IE和Firefox浏览器中起作用，大多数浏览器不支持该属性，但可使用JavaScript模拟实现。
HTML代码：
<div class="resizeable" contenteditable="true"></div>
CSS代码：
.resizeable {
overflow: auto;
outline: 2px solid #eee;
max-height: 200px; /* 最大高度 */
max-width: 100%; /* 最大宽度 */
}
JS代码：
var resizeableElement = document.querySelectorAll(".resizeable"),
resize = function(e){
currentResizer = this;
document.addEventListener("mousemove", resizeHandler);
document.addEventListener("mouseup", stopResize);
},
resizeHandler = function(e) {
currentResizer.parentElement.style.width = (e.clientX -
currentResizer.getBoundingClientRect().left) + "px";
currentResizer.parentElement.style.height = (e.clientY -
currentResizer.getBoundingClientRect().top) + "px";
},
stopResize = function(e) {
document.removeEventListener("mousemove", resizeHandler);
document.removeEventListener("mouseup", stopResize);
};
for (var i = 0, len = resizeableElement.length; i < len; i++) {
var resizer = document.createElement("div");
resizer.className = "resizer";
resizeableElement[i].appendChild(resizer);
resizer.addEventListener("mousedown", resize);
}
以上JS代码会在resizeable元素内添加一个resizer div元素，并监听mousedown、mousemove、mouseup事件，在mousedown事件中获取当前resizer元素，在mousemove事件中计算当前鼠标拖拽时父容器的宽度和高度，并在mouseup事件中移除事件监听。这样便可以通过鼠标拖拽来实现元素调整大小了。
需要注意的是，以上JS代码仅能在IE9+、Chrome、Firefox等现代浏览器中运行，不能在IE8及以下版本中实现调整大小的效果。