调整尺寸属性
最后更新：2026-09-13
resize 调整尺寸属性
resize 用于控制用户是否可以通过拖拽来调整元素的尺寸，以及允许的调整方向。它常用于 <textarea> 等元素，让用户根据需要自由改变元素大小，提升表单的可用性。
| 分类 | |
|---|---|
| 初始值 | none |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
resize: none | both | horizontal | vertical | block | inline;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
none | both | horizontal | vertical | block | inline | 关键字 | 用户调整尺寸 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| resize | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： resize 必须配合 overflow 属性（值为 auto、scroll 或 hidden）才能生效；没有 overflow 属性时 resize 无效。
提示： horizontal 只允许水平调整宽度；vertical 只允许垂直调整高度；both 允许同时调整两个方向。
❓ 常见问题
Qresize 可以用在哪些元素上？
Atextarea 默认可用；其他元素要满足两个条件：overflow 值不是 visible（auto、hidden、scroll），且元素有显式或可推断的尺寸。满足条件后，div、section、图片容器等都能获得拖拽调整手柄。inline 元素默认不适用。
Q如何禁止用户调整 textarea 大小？
A设置 resize: none 即可去掉右下角的拖拽手柄。如果只允许纵向调整写 resize: vertical，只允许横向调整写 resize: horizontal。产品要求固定布局、或 textarea 内容区高度由 JS 自动计算时，禁用 resize 是常见需求。
Qresize 不生效是什么原因？为什么必须设置 overflow？
A规范要求 resize 只在 overflow 非 visible 的元素上生效，否则属性被忽略，这是最常见的失效原因。另外元素需要能被拖拽出实际的尺寸变化——display: inline 的元素、没有尺寸约束的元素也不行。排查顺序：overflow → 元素类型 → 是否可滚动容器。
Qresize 能限制元素调整的最小最大尺寸吗？
A可以。resize 控制「能不能调」，min-width、max-width、min-height、max-height 控制「调的范围」，两者可叠加。例如 resize: both; max-width: 400px; min-width: 200px; 时，元素只能在 200~400px 之间拖动。
🏷️ 相关属性
💡 相关案例
📚 相关教程
