CSS 使 div 可调整大小

基础概念

在 CSS 中，可以通过 resize 属性使元素变得可调整大小。这个属性允许用户通过拖动元素的右下角或指定边缘来改变元素的大小。

相关属性和值

resize 属性有以下可选值：

• none (默认值)：元素不可调整大小
• both：允许水平和垂直调整大小
• horizontal：只允许水平调整大小
• vertical：只允许垂直调整大小

使用方法

要使一个 div 可调整大小，需要同时设置 resize 和 overflow 属性（overflow 不能是 visible）：

.resizable {
  resize: both;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 10px;
  width: 200px;
  height: 200px;
}

<div class="resizable">
  这是一个可调整大小的div。拖动右下角可以改变大小。
</div>

优势

1. 无需 JavaScript 即可实现调整大小功能
2. 浏览器原生支持，性能良好
3. 用户可以直观地通过拖拽调整元素大小
4. 可以限制只允许水平或垂直方向调整

应用场景

1. 富文本编辑器中的可调整文本框
2. 仪表盘中的可调整面板
3. 图片或媒体容器的尺寸调整
4. 交互式布局设计工具
5. 需要用户自定义大小的UI组件

注意事项

1. resize 属性不能应用于以下元素：
   • 内联元素
   • overflow 属性设置为 visible 的块元素
   • 表格元素

• 最小和最大尺寸可以通过 min-width、min-height、max-width、max-height 来控制。
• 在移动设备上可能体验不佳，因为触摸操作与小尺寸调整手柄交互困难。

进阶示例

.resizable-box {
  resize: horizontal;
  overflow: hidden;
  min-width: 100px;
  max-width: 500px;
  height: 150px;
  border: 2px dashed #666;
  padding: 20px;
  background-color: #f5f5f5;
}

<div class="resizable-box">
  这个div只能水平调整大小，宽度限制在100px到500px之间。
</div>

浏览器兼容性

resize 属性在现代浏览器中得到广泛支持，包括：

• Chrome 4+
• Firefox 5+
• Safari 4+
• Opera 15+
• Edge 12+

IE浏览器不支持此属性。