CSS中的resize属性

CSS | 调整属性 (CSS | resize Property)

Starting note:

开始说明：

We deal with various elements regularly while we are developing a website or a web page and to organize, edit and format those elements is a very crucial task as those elements are the basic building blocks of our website.

在开发网站或网页时，我们会定期处理各种元素，并且组织，编辑和格式化这些元素是一项非常关键的任务，因为这些元素是我们网站的基本组成部分。

So how as we all know there are numerous ways to style the elements of a web page or to change the functionality of those elements? This section is all about discussing one such property known as resize property in CSS.

那么，众所周知，有多种方式可以设置网页元素的样式或更改这些元素的功能？本节将讨论一种这样的属性， 在CSS中称为resize属性 。

Definition:

定义：

The resize property in CSS is used to resize the size of the element according to the user's need and also in which directions. The resize property can take 4 values.

CSS中的resize属性用于根据用户需要以及在哪个方向上调整元素的大小。 resize属性可以采用4个值。

Syntax:

句法：

    Element{
Resize : none|both|vertical|horizontal;
}

Let's look at each property...

让我们看一下每个属性...

1)调整大小：无 (1) resize : none)

none value is applied to the resize property when the user doesn't want to resize the element. It is also the default value.

当用户不想调整元素的大小时， none值不会应用于resize属性 。也是默认值。

Syntax:

句法：

    Element{
resize:none;
}

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid;
padding: 15px;
width: 300px;
resize: none;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>None value doesn’t allow resizing of this div element.</p>
</div>
</body>
</html>

Output

输出量

In the above example, you cannot resize the div element. It is static.

在上面的示例中，您无法调整div元素的大小。它是静态的。

2)调整大小：两者 (2) resize : both)

both value is applied to the resize property when the user wants its element to be resizable on both sides that is width and height.

当用户希望其元素在宽度和高度的两侧都可调整大小时，两个值都将应用于resize属性 。

Syntax:

句法：

    Element{
resize:both;
}

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid;
padding: 15px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>click and drag the bottom right corner to resize the height and width of this div element.</p>
</div>
</body>
</html>

Output

输出量

In the above example, to resize click and drag the bottom right corner of this div element.

在上面的示例中，要调整大小，请单击并拖动此div元素的右下角。

3)调整大小：垂直 (3) resize : vertical)

vertical value is applied to the resize property when the user wants to resize the height of the element according to its need.

当用户要根据需要调整元素的高度时，将垂直值应用于resize属性 。

Syntax:

句法：

    Element{
resize:vertical;
}

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid;
padding: 15px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>click and drag the bottom right corner to resize the height of this div element.</p>
</div>
</body>
</html>

Output

输出量

In the above example, the user can click and drag the bottom right corner of this div element to resize its height.

在上面的示例中，用户可以单击并拖动此div元素的右下角以调整其高度。

4)调整大小：水平 (4) resize : horizontal)

horizontal value is applied to the resize property when the user wants to resize the width of the element according to its need.

当用户要根据需要调整元素的宽度大小时，将水平值应用于resize属性 。

Syntax:

句法：

    Element{
resize:horizontal;
}

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid;
padding: 15px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>click and drag the bottom right corner to resize the width of this div element.</p>
</div>
</body>
</html>

Output

输出量