Css 简明教程
CSS - Resize
CSS resize 是一个属性，允许用户根据指定的值，调整元素的尺寸，可以是垂直、水平、两者或者都不调整。
调整大小属性会在网页中元素的右下角添加一个把手，此把手允许用户通过点击来改变元素大小，使其变大或变小，完全根据自己的喜好。
本章节将讲述调整大小属性的使用。
可能的取值
-
none − 不允许用户以任何方式调整元素大小，这是默认值。
-
vertical − 允许用户在垂直方向上调整元素大小。
-
horizontal − 允许用户在水平方向上调整元素大小。
-
@{0} − 允许用户在水平和垂直方向上调整元素大小。
-
@{4} − 允许用户在块状方向上调整元素大小（取决于书写方向和方向值，可以是水平或垂直方向都能调整）。
-
@{5} − 允许用户在行内方向上调整元素大小（取决于书写方向和方向值，可以是水平或垂直方向都能调整）。
CSS resize - none Value
下面的示例展示了 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 Value
下面的示例展示了 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;">Tutorialspoint</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 Value
下面的示例展示了 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;">Tutorialspoint</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 Value
下面的示例展示了 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;">Tutorialspoint</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 Value
下面的示例展示了 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;">Tutorialspoint</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 - Arbitrary Elements
可以创建包含调整大小 <p>（段落）元素的可调整大小 <div> 容器，其中用户可以通过点击并拖动右下角来调整容器和段落的大小。下面的示例演示了此类行为。
<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>Click and drag the bottom-right corner to change the size of an element.</h3>
<div class="my-box">
<h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</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>