resize属性仅支持拖拽调整元素宽高，无法实现位置移动；启用需满足overflow非visible且元素为块级或弹性/网格子项；不支持等比缩放、方向限制、边界约束及实时缩放过程捕获。
resize 属性只能拖拽改变自身尺寸，不能拖拽移动位置
resize 是 CSS 原生属性，作用非常明确：仅允许用户通过右下角（或指定方向）的手柄拖拽来调整元素的宽高。它不涉及 left、top、transform 或任何位移逻辑，因此完全无法实现“拖拽移动”效果。如果你看到某个 div 既可拖动又可缩放，那一定是 JavaScript 配合了 resize 或完全自研的拖拽逻辑，resize 自身不提供移动能力。
启用 resize 必须满足两个硬性前提
很多开发者加了 resize: both 却没反应，原因几乎都卡在这两点：
-
overflow必须不是visible（默认值），常见写法是overflow: auto或overflow: hidden - 元素不能是
inline或inline-block，必须是块级或弹性/网格子项（如display: block、display: flex）
示例有效写法：
div.resizable {
resize: both;
overflow: auto;
width: 200px;
height: 150px;
border: 1px solid #ccc;
}
resize 不支持等比缩放、方向限制和边界约束
resize 的行为由浏览器原生控制，你无法干预它的缩放比例、禁用某一边（比如只允许调宽不许调高）、也无法阻止它超出父容器。例如：
- 设
resize: horizontal后，用户仍可能通过双击或快捷键触发垂直方向变化（某些浏览器存在兼容性偏差） - 拖拽时若父容器
max-width/max-height生效，resize可能无视该限制继续拉伸，导致内容溢出或滚动条异常 - 没有事件能精确捕获“缩放中”的过程，只有
resize事件（注意：这是 window 的事件，不是元素上的；元素本身不触发resize事件）
真正需要拖拽+缩放组合时，resize 几乎无用
当你需要以下任意一项，resize 就该被放弃，转为 JavaScript 实现：
- 按住 Shift 等比缩放
- 从四边或四角任意位置缩放（不只是右下角）
- 缩放时实时校验最小尺寸、最大尺寸、宽高比
- 缩放与拖拽共存，且共享同一套边界检测逻辑（如限制在父容器内）
这时候，mousedown + mousemove + 边界 clamp 计算才是可靠路径。而 resize 在这种场景下不仅帮不上忙，还会干扰鼠标事件流（比如手柄区域重叠导致事件捕获错乱）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
