Maison > Article > interface Web > Comment masquer des éléments en CSS sans prendre de place
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>
说明:
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>
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.
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!