resize is not a known css property?-CSS Tutorial-php.cn

resize is not a known css property?

青灯夜游

Release： 2020-11-24 14:08:42

Original

2197 people have browsed it

resize is a known css property. resize is a new attribute in CSS3 that is used to specify whether an element is resized by the user; the resize attribute allows the user to freely scale the size of the element by dragging.

resize is not a known css property?

This method is suitable for all brands of computers.

Related recommendations: "CSS3 Video Tutorial"

css resize attribute

The resize attribute can specify whether an element is resized by the user.

Resize is a new attribute in CSS3, which allows users to freely scale the size of elements by dragging to enhance the user experience. In the past, this could only be achieved by writing a large number of scripts in Javascript, which was time-consuming, labor-intensive and inefficient.

The resize attribute can be used to resize an element according to user needs and in which direction. The resize attribute can take 4 values.

Syntax:

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

Copy after login

Let’s look at each attribute...

1) resize : none

The none value will not be applied to the resize attribute when the user does not want to resize the element . Also the default value.

Syntax:

    Element{
        resize:none;
    }

Copy after login

Example:

<!DOCTYPE html>

<html>

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

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

</html>

Copy after login

Output

CSS | resize Property | Example 1

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

2) resize : both

Both values will be applied ## when the user wants their element to be

resizable on both sides of width and height. #resize attribute.

Syntax:

    Element{
        resize:both;
    }

Copy after login

Example:

<!DOCTYPE html>

<html>

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

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

</html>

Copy after login

Output

CSS | resize Property | Example 2

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

3) resize : vertical

When the user wants to adjust the height of the element as needed, apply the vertical value to the

resize attribute

Syntax:

    Element{
        resize:vertical;
    }

Copy after login

Example:

<!DOCTYPE html>

<html>

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

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

</html>

Copy after login

Output

CSS | resize Property | Example 3

In the above example, the user can click and drag the lower right corner of this p element to adjust its height.

4) resize : horizontal

Apply the horizontal value to the

resize attribute

when the user wants to adjust the width size of an element as needed.

Syntax:

    Element{
        resize:horizontal;
    }

Copy after login

Example:

<!DOCTYPE html>

<html>

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

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

</html>

Copy after login

Output

CSS | resize Property | Example 4

In the above example, the user can click and drag the lower right corner of this p element to adjust its width.

For more programming-related knowledge, please visit:

Programming Teaching

! !

The above is the detailed content of resize is not a known css property?. For more information, please follow other related articles on the PHP Chinese website!