Maison > Article > interface Web > Explication détaillée du rôle de l'attribut resize en CSS3 (avec code)

Explication détaillée du rôle de l'attribut resize en CSS3 (avec code)

藏色散人original: 2018-11-05 09:35:053702parcourir

Cet article vous présente principalement l'explication détaillée du rôle de l'attribut resize en css3.

Lorsque nous concevons des pages Web, nous devons tous prendre en compte l'expérience utilisateur. Eh bien, nous savons tous que CSS est utilisé pour contrôler le style et la mise en page des pages Web. CSS3 est la dernière norme CSS.

Dans CSS3, nous pouvons trouver de nouveaux attributs, qui améliorent considérablement l'expérience utilisateur, comme le nouvel attribut de redimensionnement.

Il est recommandé de se référer au didacticiel vidéo correspondant : "Tutoriel CSS3"

Ci-dessous, nous présenterons en détail l'attribut resize en CSS3 avec des exemples de code spécifiques.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3中resize属性的用法示例</title>
    <style>
        div
        {
            border:3px solid #ff3844;
            padding:10px 20px;
            width:200px;
            resize:both;
            overflow:auto;
        }
    </style>
</head>
<body>
<div>css3中resize属性的作用：能够规定用户是否可以自由调整元素的尺寸！</div>
</body>
</html>

Accès via le navigateur, l'effet final est le suivant :

Explication détaillée du rôle de lattribut resize en CSS3 (avec code)

Vous pouvez copier et coller le code ci-dessus directement dans le local pour le tester , ici nous donnons à div Ajoutez l'attribut resize et définissez la valeur sur les deux.

Lorsque nous faisons glisser la souris sur le coin inférieur droit, nous pouvons constater que les éléments de bordure et les éléments de texte peuvent être mis à l'échelle librement Que ce soit dans le sens horizontal ou vertical, la taille du champ de texte peut être modifiée en fonction. à nos exigences. Cela montre également que l'attribut resize peut être utilisé pour modifier la taille des éléments.

En même temps, il convient de noter que lorsque nous n'ajoutons pas l'attribut overflow à ce div, même s'il existe un attribut de redimensionnement, cela n'aura aucun effet. Vous pouvez le tester localement. Ainsi, l'attribut resize n'aura d'effet que lorsque les attributs overflow et resize sont définis en même temps. Bien entendu, la valeur de débordement peut être automatique, masquée ou défilante.

Ce qui suit est un résumé des valeurs facultatives de redimensionnement :

Défini sur none pour indiquer que l'utilisateur ne peut pas redimensionner l'élément.

设置none表示用户不能调整元素的尺寸。

设置both表示用户可以调整元素的高度和宽度。

设置horizontal表示用户可以调整元素的宽度。

设置vertical表示用户可以调整元素的高度。

Cet article concerne l'explication détaillée du rôle de l'attribut

resize en CSS3. Il est très simple et facile à comprendre, j'espère. cela sera utile aux amis qui en ont besoin !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css css3 auto overflow

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Partage d'expérience : explication détaillée de l'attribut flottant CSS floatArticle suivant：Partage d'expérience : explication détaillée de l'attribut flottant CSS float

Articles Liés

Voir plus