CSS3中的resize属性—用于控制元素是否可以被用户调整大小

概念：

CSS3中的resize属性用于指定元素是否可以调整大小，它可以应用于可调整大小的元素。这个属性的取值有：

• none：默认值，表示元素不可调整大小
• both：表示元素可以在水平和垂直方向上调整大小
• horizontal：表示元素只能在水平方向上调整大小
• vertical：表示元素只能在垂直方向上调整大小

应用范围：

 这个属性通常用于<textarea>和<input>元素，但也可以应用于其他元素，下面列举一些常见的可应用和不可应用该属性的部分标签：

可以应用resize属性的元素包括：

1. <textarea>：文本域元素
2. <input>：输入框元素
3. <div>：通用块级元素
4. <iframe>标签：用于在网页中嵌入另一个网页。它允许在当前页面中显示其他网页的内容，类似于在页面中创建一个小窗口来加载其他页面。<iframe> 元素通常用于嵌入地图、视频、广告或其他外部内容。

不可应用resize属性的元素包括：

1. 行内元素（如<span>、<a>等）
2. 大多数替换元素（如<img>、<video>等）
3. 具有固定大小的元素（通过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>