recherche

Maison  >  Article  >  interface Web  >  Cacher un élément – ​​Défis CSS

Cacher un élément – ​​Défis CSS

Linda Hamilton
Linda Hamiltonoriginal
2024-11-07 12:22:02434parcourir

Hiding an element - CSS challenges

Vous pouvez trouver tout le code dans cet article sur le dépôt Github.

Vous pouvez consulter le visuel ici Masquage d'un élément - CodeSandbox

Cacher un élément 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hiding Elements</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>





<pre class="brush:php;toolbar:false">.display-none {
  display: none;
}

.outside-by-absolute {
  position: absolute;
  left: -9999px;
}

.outside-by-relative {
  position: relative;
  left: -9999px;
}

.outside-by-margin {
  margin-left: -9999px;
}

.hide-by-opacacity {
  opacity: 0;
}

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.covering-element {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.hidden-element {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hide-by-clip {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0px, 0px, 0px, 0px);
}

.hide-by-transform {
  transform: scale(0, 0);
}

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 this github
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 éliminer les lacunes dans les lignes d’amorçage empilées ?Article suivant：Comment éliminer les lacunes dans les lignes d’amorçage empilées ?

Articles Liés

Voir plus