Maison > Article > interface Web > Comment masquer des éléments en CSS sans prendre de place

Comment masquer des éléments en CSS sans prendre de place

青灯夜游original: 2022-06-01 19:15:405156parcourir

Deux méthodes : 1. À l'aide de l'attribut display, ajoutez simplement le style "display:none;" à l'élément. 2. Utilisez les attributs position et top pour définir le positionnement absolu de l'élément afin de masquer l'élément. Ajoutez simplement le style "position:absolute;top:-9999px;" à l'élément.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Deux façons de masquer des éléments en CSS sans prendre de place

Méthode 1 : utilisez l'attribut d'affichage

Définissez simplement le style display:none; sur l'élémentdisplay:none;样式即可

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .display{
                display:none;
            }
        </style>
    </head>
    <body>
        <div>正常显示元素</div>
        <div class="display">隐藏元素</div>
        <div>正常显示元素</div>
    </body>
</html>

Comment masquer des éléments en CSS sans prendre de place

说明：

display:none可以不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样；不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。

方法2：利用position和top属性

只需给元素添加position: absolute;top: -9999px;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .position{
                position: absolute;
                top: -9999px;
            }
        </style>
    </head>
    <body>
        <div>正常显示元素</div>
        <div class="position">隐藏元素</div>
        <div>正常显示元素</div>
    </body>
</html>

Comment masquer des éléments en CSS sans prendre de place Description :

display:none peut masquer l'élément sans occuper d'espace, donc la modification dynamique de cet attribut entraînera un réarrangement (modification de la mise en page), ce qui peut être compris comme la suppression de l'élément de la page. ne sera pas hérité par les descendants, mais ses descendants ne seront pas affichés. Après tout, ils sont tous cachés ensemble.

Méthode 2 : Utilisez les attributs position et top🎜🎜🎜Ajoutez simplement le style position: Absolute;top: -9999px; à l'élément🎜rrreee🎜🎜🎜🎜Instructions :🎜🎜Ce type La méthode consiste à positionner l'élément hors du flux documentaire (sans prendre de place) en décidant de le positionner, puis en définissant le haut de l'élément sur un nombre négatif suffisamment grand pour le rendre invisible à l'écran. 🎜

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!

html5 css css3 继承 display position

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：Comment utiliser la méthode slice dans jqueryArticle suivant：Comment utiliser la méthode slice dans jquery

Articles Liés

Voir plus