概念：
CSS3中的resize属性用于指定元素是否可以调整大小，它可以应用于可调整大小的元素。这个属性的取值有：
none：默认值，表示元素不可调整大小both：表示元素可以在水平和垂直方向上调整大小horizontal：表示元素只能在水平方向上调整大小vertical：表示元素只能在垂直方向上调整大小
应用范围：
这个属性通常用于<textarea>和<input>元素，但也可以应用于其他元素，下面列举一些常见的可应用和不可应用该属性的部分标签：
可以应用resize属性的元素包括：
<textarea>：文本域元素<input>：输入框元素<div>：通用块级元素- <iframe>标签：用于在网页中嵌入另一个网页。它允许在当前页面中显示其他网页的内容，类似于在页面中创建一个小窗口来加载其他页面。
<iframe>元素通常用于嵌入地图、视频、广告或其他外部内容。
不可应用resize属性的元素包括：
- 行内元素（如
<span>、<a>等） - 大多数替换元素（如
<img>、<video>等） - 具有固定大小的元素（通过CSS设置了
width和height的元素）
失效情况汇总：
- 元素的宽度或高度被固定为特定的像素值，而不能调整大小。
- 元素的父元素的宽度或高度被固定为特定的像素值，而不能调整大小。
- 页面中的CSS文件被禁用或无法加载，这可能会导致resize属性失效。
- resize属性要和overflow属性结合使用，二者缺一即不会生效！！！
注意事项及解决办法：
1. 响应式布局：当使用resize属性时，应确保元素的大小调整不会破坏页面的响应式布局。可以使用CSS媒体查询来根据屏幕大小和设备类型来设置resize属性的值或者样式。
/* 在较小的屏幕上禁用元素的调整大小 */
@media screen and (max-width: 600px) {
textarea {
resize: none;
}
}2. 布局冲突：调整元素大小可能会导致与其他元素的布局冲突。确保在使用resize属性之前，考虑如何处理相邻元素的布局。
3. 覆盖默认样式：某些浏览器可能会对resize属性应用默认样式，因此在使用resize属性时，最好明确设置所需的样式。
textarea {
resize: both;
overflow: auto;
border: 1px solid #ccc;
padding: 5px;
}4. 兼容性：不同浏览器对resize属性的支持程度可能不同。在使用resize属性之前，最好对不同浏览器进行测试，并提供必要的兼容性样式。以下是一个通用的CSS规则，可用于支持多个浏览器。
textarea {
resize: both; /* IE7+, Firefox, Opera, Safari */
-moz-resize: both; /* Firefox */
-webkit-resize: both; /* Safari, Chrome */
overflow: auto; /* 允许用户通过滚动条调整大小 */
}5. 垂直方向调整大小限制：默认情况下，在垂直方向上调整元素大小的范围是受限的，即元素的高度不能小于其内容的高度。
6.界限范围：调整元素大小时，resize属性通常会受到父元素的限制。如果父元素具有固定的宽度或高度，那么resize属性可能无法使元素超出这些限制而调整大小。因此，在使用resize属性时，要确保父元素的宽度和高度足够大，以容纳调整后的元素大小。
7.元素大小规则：一些元素，特别是表单元素，可能有固定的大小规则或布局要求，无法通过resize属性来调整大小。在使用resize属性之前，要确保目标元素适合调整大小，否则resize属性可能会失效。
最基本的使用案例：
在这个例子中，我们创建了一个具有水平和垂直调整大小功能的容器。使用resize: both;来指定同时允许在水平和垂直方向上调整大小，overflow: auto;用于显示滚动条来容纳
<style>
.resizable-container {
resize: both;
overflow: auto;
width: 300px;
height: 200px;
border: 1px solid #ccc;
padding: 10px;
}
</style>
<div class="resizable-container">
apple resizable resizableresizableresizableresizableresizableresizableresizableresizableresizableresizableresizableresizableresizableresizableresizableresizableresizableresizableresizableresizable apple
</div>