Comment utiliser la mise en page CSS Positions pour implémenter la mise en page de mesure des pages Web-tutoriel CSS-php.cn

Comment utiliser la mise en page CSS Positions pour implémenter la mise en page de mesure des pages Web

PHPz

Libérer： 2023-09-26 09:39:20

original

775 Les gens l'ont consulté

如何使用CSS Positions布局实现网页的测量布局

Comment utiliser la mise en page CSS Positions pour obtenir une mise en page mesurée des pages Web

Dans le développement Web, la mise en page est un aspect très important. La mise en page CSS Positions offre différentes manières de positionner les éléments, rendant la mise en page des pages Web plus flexible et plus gratuite. Cet article explique comment utiliser la mise en page CSS Positions pour implémenter la mise en page mesurée des pages Web et fournit des exemples de code spécifiques.

Avant d'utiliser la mise en page CSS Positions, vous devez d'abord comprendre les trois principales propriétés de positionnement : statique, relative et absolue. Parmi eux, static est l'attribut de positionnement par défaut, et les éléments sont disposés selon la disposition du flux normal ; le relatif permet le positionnement par rapport à sa propre position ; l'absolu permet le positionnement par rapport à l'élément parent non statique le plus proche. En utilisant ces attributs de positionnement de manière flexible, une variété de mises en page de pages Web différentes peuvent être obtenues.

Ce qui suit est un exemple simple de mise en page de page Web qui montre comment utiliser la mise en page CSS Positions pour implémenter la mise en page des mesures :

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
      width: 500px;
      height: 300px;
      border: 1px solid black;
    }

    .box1 {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 100px;
      height: 100px;
      background-color: blue;
    }

    .box2 {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .box3 {
      position: relative;
      top: 50px;
      left: 50px;
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

Copier après la connexion

Dans l'exemple ci-dessus, nous avons créé un conteneur.container et y avons placé trois cases.box1, .box2 et .boîte3. En utilisant différents attributs de positionnement et des valeurs de positionnement spécifiques, nous pouvons positionner ces boîtes à différents emplacements.

.box1 et .box2 utilisent la position : absolue et sont situés respectivement dans le coin supérieur gauche et le coin supérieur droit du conteneur. En définissant les propriétés haut et gauche ou droite, nous pouvons contrôler avec précision la position de la boîte.

.box3 utilise position: relative, ce qui signifie qu'elle sera positionnée par rapport à sa position d'écoulement normale. En définissant les propriétés top et left, nous pouvons affiner la boîte à l'intérieur du conteneur.

Ce qui précède est un exemple simple d'utilisation de la disposition CSS Positions pour implémenter la disposition des mesures d'une page Web. En utilisant rationnellement les attributs de positionnement et les valeurs de positionnement spécifiques, nous pouvons obtenir des effets plus complexes et plus précis dans les mises en page. J'espère que cet article pourra vous aider avec la mise en page Web !

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!