CSS - 调整大小：赋予用户控制元素尺寸的能力

你好，未来的网页开发者们！今天，我们将深入探讨一个令人兴奋的CSS属性，它将元素尺寸控制的权力直接交到网站访问者的手中。欢迎来到resize的世界！

CSS调整大小属性是什么？

在我们深入了解之前，让我们从一个简单的问题开始：你有没有注意到某些文本区域右下角的小把手，可以让你调整它们的大小？那就是resize属性在起作用！

CSS中的resize属性允许用户调整元素的大小。这就像给你的用户一个迷你拖动把手，以调整网页上某些元素的大小。酷吧？

应用范围

现在，你可能想知道，“我能否让网页上的所有东西都可以调整大小？” 嗯，并不是所有。resize属性主要适用于那些overflow属性设置为除visible之外的元素的。这通常包括：

• <textarea>元素
• 设置了overflow: auto或overflow: scroll的元素

但别担心，我们也会探讨如何使其他元素可调整大小！

语法

让我们分解一下使用resize属性的语法：

元素 {
resize: 值;
}

简单吧？现在，让我们探索可以使用哪些不同的值。

CSS调整大小值

下面是resize属性所有可能值的总结表格：

值	描述
none	元素不可调整大小
vertical	元素可垂直调整大小
horizontal	元素可水平调整大小
both	元素可垂直和水平调整大小
inherit	从父元素继承调整大小的值

现在，让我们逐一深入这些值，并给出一些生动的例子！

CSS调整大小 - none值

textarea {
resize: none;
}

这段代码告诉浏览器，“嘿，不要让任何人调整这个文本区域的大小！”就像在元素上贴了一个“请勿触摸”的标签。

CSS调整大小 - vertical值

textarea {
resize: vertical;
height: 100px;
width: 200px;
}

使用这段代码，你的文本区域从100px高和200px宽开始，但用户可以通过拖动来使其更高或更短。就像给文本区域装了一个电梯！

CSS调整大小 - horizontal值

div {
resize: horizontal;
overflow: auto;
width: 200px;
height: 100px;
border: 2px solid blue;
}

在这里，我们将resize: horizontal应用到一个div上。记住，对于非文本区域元素，我们需要将overflow设置为除visible之外的其他值。用户现在可以调整这个div的宽度，就像拉伸一根橡皮筋！

CSS调整大小 - both值

textarea {
resize: both;
min-height: 100px;
max-height: 300px;
min-width: 200px;
max-width: 400px;
}

这是终极灵活性！用户可以任意方向调整文本区域的大小，但我们设置了一些限制，防止它变得太小或太大。就像给用户一个沙盒来玩耍，但有一些围栏来保持控制。

CSS调整大小 - inherit值

.parent {
resize: both;
overflow: auto;
}

.child {
resize: inherit;
}

在这里，子元素将从其父元素继承调整大小的行为。就像传递一个家族传世之宝，但用于调整大小！

CSS调整大小 - 任意元素

现在，让我们来点冒险的。如果我们想要让一个普通的div可调整大小会怎样？

.resizable-div {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid #00f;
overflow: auto;
resize: both;
}

<div class="resizable-div">
<p>我是一个可调整大小的div！试着调整我的大小！</p>
</div>

通过设置overflow: auto和resize: both，我们将一个普通的div变成了一个可调整大小的游乐场！就像给HTML元素赋予了超能力。

结论

就这样，各位！我们已经探索了CSSresize属性的奇妙世界。从使用resize: none锁定元素，到创建具有完全灵活性的组件resize: both，你现在有了控制网页上元素大小的权力。

记住，能力越大，责任越大。明智地使用resize属性来增强用户体验，而不是迷惑或激怒你的访问者。

在你继续网页开发之旅时，继续尝试不同的CSS属性。谁知道呢？你可能会发现一个新技巧，加入到你的编码工具箱中！

快乐编码，愿你的元素始终保持完美尺寸！

Credits: Image by storyset