resize属性仅对溢出触发滚动条的块级元素生效，需同时满足display为块级/inline-block等且overflow为auto、scroll或hidden；textarea默认支持但可被重置；手柄位置固定不可自定义，需手动实现自定义拖拽。
resize属性只对可滚动的块级元素生效
直接给 div 或 span 加 resize: both 是没用的，浏览器会静默忽略。必须同时满足两个条件：元素是块级（或 inline-block/inline-flex 等能产生滚动框的显示类型），且内容溢出导致出现滚动条——也就是 overflow 值为 auto、scroll 或 hidden（注意：visible 不行）。
常见误操作是只写 resize: vertical 却忘了设 overflow: auto，结果拖拽手柄根本不显示。
- 推荐组合：
overflow: auto+resize: both（最稳妥，自动触发滚动） - 若明确不需要滚动条但又要 resize，可用
overflow: hidden，但此时用户看不到溢出内容，仅靠拖拽调整尺寸 -
resize对inline元素无效，哪怕强行设display: inline也会被忽略
textarea 默认支持 resize，但可被禁用或限制方向
textarea 是少数开箱即用支持 resize 的表单控件，默认值就是 resize: both。如果你发现它不能拖，大概率是被 CSS 重置了：
- 检查是否写了
resize: none（常见于重置样式表或 UI 框架） - 想只允许垂直拉伸？用
resize: vertical，水平方向拖拽手柄会消失 -
resize: horizontal同理，但要注意：当textarea行数少、内容不换行时，水平拉伸可能无视觉反馈 - 某些浏览器（如 Safari）对
textarea的resize行为更严格，建议始终配min-width/min-height防止缩到看不见
resize 手柄位置固定，无法用 CSS 自定义样式或移动
所有主流浏览器都把 resize 手柄画在右下角（resize: both）或右/下边缘（vertical/horizontal），且完全由 UA 样式控制。你无法：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
::-webkit-resizer以外的伪元素选中它（而::-webkit-resizer仅限 WebKit，且只能改颜色/背景，不能移位） - 通过
transform或margin调整手柄位置 - 监听手柄点击事件——它不是真实 DOM 节点，只是渲染层叠加图形
- 在 Flex/Grid 容器中改变手柄对齐方式（它始终锚定在盒模型的 border box 右下角）
如果需要自定义拖拽区域（比如整个边框都能拉），得放弃 resize，改用 mousemove + getBoundingClientRect() 手动实现。
resize 不触发 DOM 尺寸变化事件，需监听 element.style
resize 属性本身不派发任何事件，resize 事件只适用于 window 对象。用户拖拽后，元素尺寸变的是内联 style 的 width 和 height，不会修改 class 或 CSSOM 规则。
- 要响应尺寸变化，得轮询
element.style.width/element.style.height，或用MutationObserver监听style属性变更（但注意：仅当用户拖拽时才写入内联样式） - 用
getComputedStyle(element).width拿到的是计算后值（带单位），而element.style.width可能为空字符串（初始无内联宽高） - 别指望
ResizeObserver能捕获 —— 它监听的是布局尺寸变化，而resize拖拽触发的尺寸变更属于用户交互驱动的内联样式更新，ResizeObserver确实能观测到，但延迟略高，且需处理初始值判断
真正难搞的是跨浏览器一致性：Firefox 在某些 zoom 级别下会禁用手柄，Safari 对 min/max 尺寸限制更敏感，这些细节不踩一遍很难全记住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
