CSS中的resize属性

CSS | 调整属性 (CSS | resize Property)

Starting note:

开始说明:

We deal with various elements regularly while we are developing a website or a web page and to organize, edit and format those elements is a very crucial task as those elements are the basic building blocks of our website.

在开发网站或网页时,我们会定期处理各种元素,并且组织,编辑和格式化这些元素是一项非常关键的任务,因为这些元素是我们网站的基本组成部分。

So how as we all know there are numerous ways to style the elements of a web page or to change the functionality of those elements? This section is all about discussing one such property known as resize property in CSS.

那么,众所周知,有多种方式可以设置网页元素的样式或更改这些元素的功能? 本节将讨论一种这样的属性, 在CSS中称为resize属性

Definition:

定义:

The resize property in CSS is used to resize the size of the element according to the user's need and also in which directions. The resize property can take 4 values.

CSS中resize属性用于根据用户需要以及在哪个方向上调整元素的大小。 resize属性可以采用4个值。

Syntax:

句法:

    Element{
        Resize : none|both|vertical|horizontal;
    }

Let's look at each property...

让我们看一下每个属性...

1)调整大小:无 (1) resize : none)

none value is applied to the resize property when the user doesn't want to resize the element. It is also the default value.

当用户不想调整元素的大小时, none值不会应用于resize属性 。 也是默认值。

Syntax:

句法:

    Element{
        resize:none;
    }

Example:

例:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: none;
        }
    </style>
</head>

<body>
    <h1>The resize Property</h1>
    <div>
        <p>None value doesn’t allow resizing of this div element.</p>
    </div>
</body>

</html>

Output

输出量

CSS | resize Property | Example 1

In the above example, you cannot resize the div element. It is static.

在上面的示例中,您无法调整div元素的大小。 它是静态的。

2)调整大小:两者 (2) resize : both)

both value is applied to the resize property when the user wants its element to be resizable on both sides that is width and height.

当用户希望其元素在宽度和高度的两侧都可调整大小时, 两个值都将应用于resize属性

Syntax:

句法:

    Element{
        resize:both;
    }

Example:

例:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: both;
            overflow: auto;
        }
    </style>
</head>

<body>
    <h1>The resize Property</h1>
    <div>
        <p>click and drag the bottom right corner to resize the height and width of this div element.</p>
    </div>
</body>

</html>

Output

输出量

CSS | resize Property | Example 2

In the above example, to resize click and drag the bottom right corner of this div element.

在上面的示例中,要调整大小,请单击并拖动此div元素的右下角。

3)调整大小:垂直 (3) resize : vertical)

vertical value is applied to the resize property when the user wants to resize the height of the element according to its need.

当用户要根据需要调整元素的高度时,将垂直值应用于resize属性

Syntax:

句法:

    Element{
        resize:vertical;
    }

Example:

例:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: vertical;
            overflow: auto;
        }
    </style>
</head>

<body>
    <h1>The resize Property</h1>
    <div>
        <p>click and drag the bottom right corner to resize the height of this div element.</p>
    </div>
</body>

</html>

Output

输出量

CSS | resize Property | Example 3

In the above example, the user can click and drag the bottom right corner of this div element to resize its height.

在上面的示例中,用户可以单击并拖动此div元素的右下角以调整其高度。

4)调整大小:水平 (4) resize : horizontal)

horizontal value is applied to the resize property when the user wants to resize the width of the element according to its need.

当用户要根据需要调整元素的宽度大小时,将水平值应用于resize属性

Syntax:

句法:

    Element{
        resize:horizontal;
    }

Example:

例:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: horizontal;
            overflow: auto;
        }
    </style>
</head>

<body>
    <h1>The resize Property</h1>
    <div>
        <p>click and drag the bottom right corner to resize the width of this div element.</p>
    </div>
</body>

</html>

Output

输出量

CSS | resize Property | Example 4

In the above example, the user can click and drag the bottom right corner of this div element to resize its width.

在上面的示例中,用户可以单击并拖动此div元素的右下角以调整其宽度。

翻译自: https://www.includehelp.com/code-snippets/the-resize-property-in-css.aspx

  • 1
    点赞
  • 0
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值