Taille des éléments dynamiques via la manipulation du positionnement CSS-tutoriel CSS-php.cn

Taille des éléments dynamiques via la manipulation du positionnement CSS

不言

Libérer： 2018-11-07 16:23:03

original

3018 Les gens l'ont consulté

Cet article vous présente le contenu de la taille des éléments dynamiques via l'opération de positionnement CSS. Les amis intéressés peuvent y jeter un œil, sans plus tarder, jetons un œil au contenu spécifique.

Conseils pour fournir des éléments aux volumes sans utiliser la largeur et la hauteur ou JS.

C’est une astuce très simple que beaucoup de gens ne connaissent pas. (Tutoriel recommandé : Tutoriel vidéo CSS)

Supposons que vous souhaitiez créer une boîte modale contenant tous les écrans sauf 100 px par écran, comment résoudriez-vous ce problème ?

Supposons que vous souhaitiez créer un modal couvrant tout l'écran à l'exception de 100 px de chaque bordure, comment résoudriez-vous ce problème ?

HTML

<div class="popup">some content</div>

Copier après la connexion

Nous devons d'abord ajouter un attribut position:fixed à notre div.

Après cela, nous voulons positionner le modal 100px de chaque côté de la fenêtre, pourquoi ne devrions-nous pas lui donner les 4 paramètres d'attribut de position (haut, droite, bas, gauche) ?

La solution est que vous pouvez donner les 4 paramètres de positionnement fixe/absolu, haut : 100px, droite : 100px, bas : 100px gauche : 100px ;.

En faisant cela, vous pouvez créer des tailles d'éléments dynamiques en conséquence à partir de 100 px de chaque côté.

CSS

.popup{  
      position:fixed;
      z-index:5;
      left:100px;
      right:100px;
      top:100px; 
      bottom:100px;
      /*some styles*/
      background-color:#ccc;
      border-radius:10px;
      border:solid 3px #000;
      padding:20px; 
      }

Copier après la connexion

Le div résultant est une boîte modale à taille automatique sans une seule ligne de JS.

Code complet :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	.popup{  
  position:fixed;
  z-index:5;
  left:100px;
  right:100px;
  top:100px; 
  bottom:100px;
  background-color:#ccc;
  border-radius:10px;
  border:solid 3px #000;
  padding:20px;  
}
</style>
</head>
<body>
<div class="popup">文字内容</div>
</body>
</html>

Copier après la connexion

Maintenant, disons que vous souhaitez ajouter un masque sous la boîte modale, exactement la même idée !

Voici la solution :

HTML :

<div class="mask"></div>

Copier après la connexion

CSS

.mask{
  position:fixed;
  z-index:2;
  left:0;
  right:0;
  top:0; 
  bottom:0;  
  background-color:rgba(0,0,0,0.8);  
  }

Copier après la connexion

Code complet :










文字内容
<div class="mask"></div>

Copier après la connexion

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!