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
輸出量
In the above example, the user can click and drag the bottom right corner of this div element to resize its width.
在上面的示例中，用戶可以單擊并拖動此div元素的右下角以調整其寬度。
翻譯自: https://www.includehelp.com/code-snippets/the-resize-property-in-css.aspx
