CSS resize 语法
在 CSS 中，resize 属性用于定义用户是否可以调整元素的大小。
语法：
resize: 关键字;说明：
resize 属性取值是一个关键字，常用的如下表所示。
| 取值 | 说明 |
|---|---|
| none（默认值） | 不允许用户改变元素大小 |
| both | 可同时调整宽度和高度（水平 + 垂直） |
| horizontal | 仅可调整宽度（左右拉伸） |
| vertical | 仅可调整高度（上下拉伸） |
| block | 根据写字方向，允许在 “块方向” 缩放 |
| inline | 根据写字方向，允许在 “内联方向” 缩放 |
当 resize 生效时，浏览器通常会在元素的 “右下角” 渲染一个倾斜的线条或三角形手柄（grip），提示用户可以拖拽。
对于 resize 属性，小伙伴们还要清楚以下几点。
- 只有当元素的 overflow 设置为 auto、scroll 或 hidden 时，resize 才会生效。如果 overflow 是默认值 visible，则 resize 无效。
- resize 不会突破 min-width、max-width、min-height、max-height 限制。
- block 和 inline 这两个取值与 writing-mode（书写方向）有关，通常用于支持多语言布局。
CSS resize 摘要
| 属于 | CSS 用户界面属性 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | none |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS resize 示例
接下来，我们通过一个简单的例子来讲解一下 CSS resize 属性是如何使用的。
示例：resize 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
overflow: auto; /* 必须设置overflow属性 */
width: 150px;
height: 150px;
padding: 10px;
margin: 20px;
}
.box1 {
resize: both; /* 允许用户调整宽度和高度 */
background-color: lightblue;
border: 1px solid blue;
}
.box2 {
resize: none; /* 不允许用户调整大小 */
background-color: lightgreen;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box1">
<p>这个盒子可以调整大小。</p>
</div>
<div class="box2">
<p>这个盒子不能调整大小。</p>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，由于给 box1 设置了 overflow: auto; 和 resize: both;，因此我们可以通过拖动右下角的把手来自由调整其宽度和高度。
而 box2 由于设置了 resize: none;，即使已经设置了 overflow: auto;，我们也无法调整其大小。
