resize n'est pas une propriété CSS connue ?-tutoriel CSS-php.cn

resize n'est pas une propriété CSS connue ?

青灯夜游

Libérer： 2020-11-24 14:08:42

original

2197 Les gens l'ont consulté

resize est une propriété CSS connue. Resize est un nouvel attribut en CSS3, qui est utilisé pour spécifier si un élément est redimensionné par l'utilisateur ; l'attribut resize permet à l'utilisateur de redimensionner librement la taille de l'élément en le faisant glisser.

resize n'est pas une propriété CSS connue ?

Cette méthode convient à toutes les marques d'ordinateurs.

Recommandations associées : "Tutoriel vidéo CSS3"

Attribut de redimensionnement CSS

L'attribut

resize peut spécifier si un élément est redimensionné par l'utilisateur.

resize est un nouvel attribut de CSS3, qui permet aux utilisateurs de redimensionner librement la taille des éléments en les faisant glisser pour améliorer l'expérience utilisateur. Dans le passé, cela ne pouvait être réalisé qu'en écrivant un grand nombre de scripts en Javascript, ce qui prenait du temps, demandait beaucoup de travail et était inefficace. L'attribut

resize peut être utilisé pour redimensionner un élément en fonction des besoins de l'utilisateur et dans quelle direction. L'attribut resize peut prendre 4 valeurs.

Syntaxe :

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

Copier après la connexion

Regardons chaque attribut...

1) redimensionner : aucun

La valeur none ne sera pas appliquée à l'attribut resize lorsque l'utilisateur ne souhaite pas redimensionner l'élément. Également la valeur par défaut.

Syntaxe :

    Element{
        resize:none;
    }

Copier après la connexion

Exemple :

<!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>

Copier après la connexion

Sortie

CSS | resize Property | Example 1

Dans l'exemple ci-dessus, vous ne pouvez pas redimensionner l'élément p. C'est statique.

2) redimensionner : les deux

Lorsque l'utilisateur souhaite que son élément soit

redimensionnable

des deux côtés de la largeur et de la hauteur, les deux valeurs seront appliquées redimensionner l'attribut.

Syntaxe :

    Element{
        resize:both;
    }

Copier après la connexion

Exemple :

<!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>

Copier après la connexion

Sortie

CSS | resize Property | Example 2

Dans l'exemple ci-dessus, pour redimensionner, cliquez et faites glisser le coin inférieur droit de cet élément p.

3) redimensionner : vertical

Lorsque l'utilisateur souhaite ajuster la hauteur de l'élément selon ses besoins, appliquez la valeur verticale à l'

attribut de redimensionnement

Syntaxe :

    Element{
        resize:vertical;
    }

Copier après la connexion

Exemple :

<!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>

Copier après la connexion

Sortie

CSS | resize Property | Example 3

Dans l'exemple ci-dessus, l'utilisateur peut cliquer et faire glisser le coin inférieur droit de cet élément p pour ajuster sa hauteur.

4) redimensionner : horizontal

Lorsque l'utilisateur souhaite redimensionner la largeur

taille

d'un élément selon ses besoins, appliquez la valeur horizontale à l'attribut de redimensionnement.

Syntaxe :

    Element{
        resize:horizontal;
    }

Copier après la connexion

Exemple :

<!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>

Copier après la connexion

Sortie

CSS | resize Property | Example 4