CSS resize 是一个属性，允许用户根据指定的值调整元素的大小（垂直、水平、两者或无）。
Resize 属性在底部添加一个手柄- 网页上元素的右上角。该手柄允许用户单击并拖动来更改元素的大小，根据自己的喜好使其变大或变小。
本章将介绍 resize 属性的使用。
属性值
none: 没有用户可控制的方法来调整元素的大小。这是默认值。
vertical: 用户可以在垂直方向调整元素的大小。
horizontal: 用户可以调整大小水平方向的元素。
both: 用户可以水平和垂直调整元素的大小。
block: 用户可以在块方向上调整元素的大小（水平或垂直，取决于写入模式和方向值）。
inline: 用户可以在内联方向上调整元素的大小（水平或垂直，取决于书写模式和方向值）。
属性 block 和 inline 仅在 Firefox 和 Safari 浏览器上受支持。
适用范围
除可见元素之外的overflow元素，以及可选的替换表示图像或视频和 iframe 的元素。
语法
resize: none | vertical | horizontal| both; CSS resize : none值
以下示例演示如何使用设置为none值的 CSS 调整大小属性。在这里我们看到用户无法在任何方向上调整元素的大小。 resize: none 是默认值。
<html>
<head>
<style>
textarea {
background-color: #e7ef0e;
color: #ee2610;
resize: none;
overflow: auto;
height: 150px;
width: 250px;
}
</style>
</head>
<body>
<textarea>孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。</textarea>
</body>
</html> CSS resize: vertical值
以下示例演示如何使用设置为垂直的 CSS 调整大小属性。在这里，我们看到用户可以通过拖动右下角来垂直调整 <div> 元素的高度。
<html>
<head>
<style>
div {
background-color: #e7ef0e;
color: #ee2610;
resize: vertical;
overflow: auto;
height: 150px;
width: 250px;
}
</style>
</head>
<body>
<h3>单击并拖动右下角可垂直更改元素的大小。</h3>
<div>
<h2 style="color: #0f5e02; text-align: center;">yxjc123.com</h2>
孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。
</div>
</body>
</html> CSS resize: horizontal值
以下示例演示了如何使用设置为水平的 CSS 调整大小属性。在这里，我们看到用户可以通过拖动右下角来水平修改 <div> 元素的宽度。
<html>
<head>
<style>
div {
background-color: #e7ef0e;
color: #ee2610;
resize: horizontal;
overflow: auto;
height: 150px;
width: 250px;
}
</style>
</head>
<body>
<h3>单击并拖动右下角可水平更改元素的大小。</h3>
<div>
<h2 style="color: #0f5e02; text-align: center;">yxjc123.com</h2>
孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。
</div>
</body>
</html> CSS resize: 水平和垂直
以下示例演示了将 CSS resize 属性设置为两者的用法。在这里，我们看到用户可以水平和垂直调整元素的大小。
<html>
<head>
<style>
div {
background-color: #e7ef0e;
color: #ee2610;
resize: both;
overflow: auto;
height: 150px;
width: 250px;
}
</style>
</head>
<body>
<h3>单击并拖动右下角可垂直和水平更改元素的大小。</h3>
<div>
<h2 style="color: #0f5e02; text-align: center;">yxjc123.com</h2>
孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。
</div>
</body>
<html> CSS resize: 继承值
以下示例演示如何使用设置为在子元素上继承的 CSS 调整大小属性。在这里我们看到它将具有与其父元素相同的调整大小行为。
<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>单击并拖动右下角以更改元素的大小。</h3>
<div class="my-box1">
<div class="my-box2">
<h2 style="color: #0f5e02; text-align: center;">yxjc123.com</h2>
孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。
</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;">yxjc123.com</h2>
<p class="my-box"> 孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。</p>
</div>
</body>
</html>