resize 属性需配合 overflow 为 auto/scroll/hidden 且 display 非 inline 才生效；div 默认 overflow: visible，故不触发调整手柄；textarea 默认支持但可能被 reset.css 禁用。
resize 属性本身不能直接让 <div> 可拖拽调整尺寸——它必须配合特定条件才生效，否则浏览器会静默忽略。
<h3>为什么给 div 写了 resize: both 却没反应？</h3>
<p>根本原因是：浏览器只对「触发滚动机制」的块级元素启用 <code>resize，而 <div> 默认 <code>overflow: visible，不满足前提。
-
resize要求元素的overflow计算值必须是auto、scroll或hidden（visible不行） - 同时要求显示类型能产生滚动框，比如
display: block、inline-block、flex等；display: inline无效 - 常见误操作：
div { resize: vertical; }却漏掉overflow声明，手柄压根不出现
最稳妥的生效组合：overflow: auto + resize
overflow: auto 是推荐首选，它既保证手柄出现，又在内容溢出时自动显示滚动条，用户体验更自然。
div {
width: 300px;
height: 150px;
border: 1px solid #ccc;
resize: both;
overflow: auto;
}
- 不用等内容真的溢出——只要设了
overflow: auto，手柄就会显示 - 如果明确不想让用户看到滚动条，可用
overflow: hidden，但要注意：溢出内容会被裁剪，且用户无法感知尺寸变化是否“有效” - 避免用
overflow: scroll，它强制显示滚动条，即使内容没溢出，视觉干扰大
textarea 为啥默认就能拉？但有时又失效？
<textarea></textarea> 是少数开箱即用支持 resize 的元素，默认 resize: both。失效通常是因为被重置了：
- 检查是否写了
textarea { resize: none; }（很多 UI 框架或 reset.css 会这么干） - 想限制方向？用
resize: vertical或resize: horizontal即可，但注意：vertical在 Safari 中更敏感，建议配min-height防止缩到看不见 -
resize: block和resize: inline依赖writing-mode，日常开发极少用，兼容性也弱，别碰
手柄位置和事件监听的硬限制
右下角那个小方块不是 DOM 节点，是浏览器渲染层绘制的固定图形，你没法用 CSS 移动它、换颜色（::-webkit-resizer 只能改背景/颜色，且仅限 WebKit），也不能给它绑 click 或 drag 事件。
-
resize不触发任何 DOM 事件，window.onresize对它完全无感 - 尺寸变化只反映在
element.style.width和element.style.height上，需轮询或用MutationObserver监听 style 变化（不推荐） - 真要自定义拖拽区域（比如四边都能拉、拖边框变尺寸），得放弃
resize，手动实现mousedown+mousemove+getBoundingClientRect()
最容易被忽略的是：哪怕你把所有样式写对了，如果父容器用了 display: flex 或 display: grid 且没设 align-items/justify-content，手柄也可能被裁掉或错位——因为 resize 手柄始终锚定在元素 border box 的右下角，不受 flex/grid 对齐控制。
