Compréhension approfondie de cinq cadres de mise en page CSS courants-tutoriel CSS-php.cn

Compréhension approfondie de cinq cadres de mise en page CSS courants

WBOY

Libérer： 2024-01-16 08:41:06

original

1003 Les gens l'ont consulté

Compréhension approfondie de cinq cadres de mise en page CSS courants

Comprendre le cadre de mise en page CSS : analyse de cinq mises en page courantes

Dans la conception et le développement Web, la mise en page CSS est un aspect très important. Une bonne mise en page peut rendre une page Web plus belle et plus fonctionnelle. Comprendre le cadre de mise en page CSS peut nous aider à mieux maîtriser les compétences de mise en page des pages Web. Cet article présentera cinq mises en page CSS courantes et fournira des exemples de code spécifiques.

1. Mise en page fluide (positionnement fluide)

La mise en page fluide est une méthode de mise en page adaptative à la taille de l'écran. Utilisez principalement des pourcentages pour définir la largeur ou la hauteur des éléments afin de s'adapter à différentes tailles d'écran. Ce qui suit est un exemple simple de disposition de flux :

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 100%;
      }
      .left-panel {
        width: 25%;
        background-color: yellow;
        float: left;
      }
      .right-panel {
        width: 75%;
        background-color: lightblue;
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left-panel">
        <p>This is left panel.</p>
      </div>
      <div class="right-panel">
        <p>This is right panel.</p>
      </div>
    </div>
  </body>
</html>

Copier après la connexion

2. Disposition en grille (Grid)

La disposition en grille est une méthode de disposition en deux dimensions qui peut facilement créer des structures de grille complexes. À l’aide de la disposition en grille, vous créez des lignes et des colonnes dans un conteneur, puis placez les éléments dans des emplacements spécifiés. Voici un exemple simple de disposition de grille :

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
      }
      .item {
        background-color: lightblue;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
    </div>
  </body>
</html>

Copier après la connexion

3. Disposition flexible (Flexbox)

Flexbox est une méthode de disposition flexible qui peut ajuster automatiquement la taille et la position des éléments dans un conteneur. Grâce à une mise en page flexible, divers besoins de mise en page peuvent être facilement réalisés. Ce qui suit est un exemple de mise en page flexible simple :

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        justify-content: space-between;
      }
      .item {
        background-color: lightblue;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>
</html>

Copier après la connexion

4. Mise en page flottante (Float)

La mise en page flottante est une technologie utilisée pour mettre en œuvre une mise en page multi-colonnes. En faisant flotter des éléments vers des positions spécifiées, vous pouvez obtenir l'effet de plusieurs colonnes. Ce qui suit est un exemple simple de mise en page flottante :

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        overflow: hidden;
      }
      .item {
        width: 30%;
        background-color: lightblue;
        float: left;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>
</html>

Copier après la connexion

5. Mise en page de positionnement (Position)

La mise en page de positionnement est une manière de disposer des éléments en spécifiant leur position dans le flux de documents. En définissant la propriété position de l'élément, vous pouvez positionner l'élément par rapport à son élément parent ou à la fenêtre du document. Ce qui suit est un exemple simple de mise en page de positionnement :

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        height: 200px;
        background-color: lightblue;
      }
      .item {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
    </div>
  </body>
</html>

Copier après la connexion

Résumé :

Cet article présente cinq cadres de mise en page CSS courants, à savoir la mise en page fluide, la mise en page en grille, la mise en page élastique, la mise en page flottante et la mise en page de positionnement. En apprenant ces cadres de mise en page, nous pouvons mieux maîtriser les compétences de mise en page Web et être capables de choisir la méthode de mise en page appropriée en fonction des besoins réels. J'espère que cet article sera utile à tout le monde !

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!