CSS - Resize
CSS resize 属性允许用户根据指定的值调整元素的大小，可以是垂直方向、水平方向、两者皆可或都不允许。
Resize 属性会在网页元素右下角添加一个拖拽手柄，用户可以通过点击并拖拽此手柄来改变元素的大小，使其变大或变小，以满足个人偏好。
本章将介绍 resize 属性的使用。
可能的值
none − 元素无法通过用户控制进行调整大小。这是默认值。
vertical − 用户可以在垂直方向调整元素大小。
horizontal − 用户可以在水平方向调整元素大小。
both − 用户可以同时在水平和垂直方向调整元素大小。
block − 用户可以在块级方向调整元素大小（根据 writing-mode 和 direction 值，可能为水平或垂直方向）。
inline − 用户可以在内联方向调整元素大小（根据 writing-mode 和 direction 值，可能为水平或垂直方向）。
block 和 inline 属性仅在 Firefox 和 Safari 浏览器中得到支持。
适用元素
具有除 visible 外的 overflow 值的元素，以及可选的表示图像或视频的替换元素和 iframe
语法
resize: none | vertical | horizontal| both;
CSS resize - none 值
以下示例演示了 CSS resize 属性设置为 none 值的使用。在此示例中，用户被禁止在任何方向调整元素大小。resize: none 是默认值。
<html>
<head>
<style>
textarea {
background-color: #e7ef0e;
color: #ee2610;
resize: none;
overflow: auto;
height: 150px;
width: 250px;
}
</style>
</head>
<body>
<textarea>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</textarea>
</body>
</html>
CSS resize - vertical 值
以下示例演示了 CSS resize 属性设置为 vertical 的使用。在此示例中，用户可以通过拖拽右下角来垂直调整 <div> 元素的高度。
<html>
<head>
<style>
div {
background-color: #e7ef0e;
color: #ee2610;
resize: vertical;
overflow: auto;
height: 150px;
width: 250px;
}
</style>
</head>
<body>
<h3>Click and drag the bottom-right corner to change the size of an element vertically.</h3>
<div>
<h2 style="color: #0f5e02; text-align: center;"></h2>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
</div>
</body>
</html>
CSS resize - horizontal 值
以下示例演示了 CSS resize 属性设置为 horizontal 的用法。在此，用户可以通过拖动右下角来水平修改 <div> 元素的宽度。
<html>
<head>
<style>
div {
background-color: #e7ef0e;
color: #ee2610;
resize: horizontal;
overflow: auto;
height: 150px;
width: 250px;
}
</style>
</head>
<body>
<h3>Click and drag the bottom-right corner to change the size of an element horizontally.</h3>
<div>
<h2 style="color: #0f5e02; text-align: center;"></h2>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the internet.
</div>
</body>
</html>
CSS resize - both 值
以下示例演示了 CSS resize 属性设置为 both 的用法。在此，用户可以同时水平和垂直调整元素的大小。
<html>
<head>
<style>
div {
background-color: #e7ef0e;
color: #ee2610;
resize: both;
overflow: auto;
height: 150px;
width: 250px;
}
</style>
</head>
<body>
<h3>Click and drag the bottom-right corner to change the size of an element vertically and horizontally.</h3>
<div>
<h2 style="color: #0f5e02; text-align: center;"></h2>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
</div>
</body>
<html>
CSS resize - inherit 值
以下示例演示了在子元素上将 CSS resize 属性设置为 inherit 的用法。在此，它将具有与父元素相同的调整大小行为。
<html>
<head>
<style>
.my-box1 {
background-color: #e7ef0e;
color: #ee2610;
resize: vertical;
overflow: auto;
height: 150px;
width: 250px;
}
.my-box2 {
resize: inherit;
}
</style>
</head>
<body>
<h3>Click and drag the bottom-right corner to change the size of an element.</h3>
<div class="my-box1">
<div class="my-box2">
<h2 style="color: #0f5e02; text-align: center;"></h2>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
</div>
</div>
</body>
</html>
CSS resize - 任意元素
可以创建一个可调整大小的 <div> 容器，其中包含一个可调整大小的 <p>（段落）元素，用户可以点击并拖动右下角来改变容器和段落的大小。以下示例演示了这种行为。
<html>
<head>
<style>
.my-box {
background-color: #e7ef0e;
color: #ee2610;
resize: both;
overflow: scroll;
border: 2px solid black;
}
div {
height: 250px;
width: 250px;
}
p {
height: 150px;
width: 150px;
}
</style>
</head>
<body>
<h3>点击并拖动右下角来改变元素的大小。</h3>
<div class="my-box">
<h2 style="color: #0f5e02; text-align: center;"></h2>
<p class="my-box"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you ar going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
</div>
</body>
</html>