CSS resize 属性

此 CSS 属性允许用户通过单击或拖动元素的右下角来控制元素的重排大小。

此 CSS 属性用于定义用户如何重排元素的大小。它不适用于 overflow 设置为 visible 的块级或内联元素。因此，要控制元素的重排大小，我们必须将 overflow 设置为 visible 以外的值，例如 (overflow: hidden 或 overflow: scroll)。

可以仅在水平方向、仅在垂直方向或在两个方向上重排元素的大小。将 resize 属性应用于元素后，我们会在元素的右下角看到一个小的三角形旋钮。用户可以拖动旋钮以在垂直、水平或两个方向上放大文本区域。

有时重排元素的大小可能会以不希望的方式影响整个布局。因此，根据布局，有时最好不允许重排元素的大小，或仅将重排大小限制在一个方向。

语法

属性值

此 CSS 属性的属性值定义如下

none: 这是此属性的默认值，不允许重排元素的大小。

horizontal: 此值允许用户重排元素的宽度。它在水平方向上重排元素的大小。有一个单向的水平机制用于控制元素的宽度。

vertical: 它允许用户重排元素的高度。它在垂直方向上重排元素的大小。有一个单向的垂直机制用于控制元素的高度。

both: 它允许用户重排元素的宽度和高度。它在水平和垂直两个方向上重排元素的大小。

initial: 它将属性设置为默认值。

inherit： 它继承父元素的属性。

让我们通过一些示例来理解这个 CSS。

示例：使用 horizontal 值

此值具有单向重排大小的功能，允许用户调整元素的宽度。

输出

在上面的输出中，我们可以看到 div 元素在水平方向上的重排大小。我们可以在元素的右下角看到三角形旋钮。要查看效果，我们必须单击并拖动旋钮。

示例：使用 vertical 值

与 horizontal 值类似，它也具有单向重排大小的功能，但它允许用户调整元素的高度。

输出

在上面的输出中，我们可以看到 div 元素在垂直方向上的重排大小。我们可以在元素的右下角看到一个三角形旋钮。要查看效果，我们必须单击并拖动旋钮。

示例：使用 both 值

此值具有双向重排大小的功能，允许用户调整元素的宽度和高度。

输出

示例：使用 none 值

它不提供任何重排大小的机制。

输出