Qu'est-ce que la mise en page ?

La mise en page fait référence à une méthode de composition adoptée dans la conception Web pour organiser et afficher les éléments d'une page Web selon certaines règles et structures. Grâce à une mise en page raisonnable, la page Web peut être rendue plus belle et plus soignée, et offrir une bonne expérience utilisateur.

Dans le développement front-end, vous avez le choix entre de nombreuses méthodes de mise en page, telles que la mise en page traditionnelle des tableaux, la mise en page flottante, la mise en page de positionnement, etc. Cependant, avec la promotion de HTML5 et CSS3, les technologies de mise en page réactives modernes, telles que la mise en page Flexbox et la mise en page Grid, sont devenues les méthodes de mise en page les plus couramment utilisées dans le développement front-end.

Ci-dessous, nous présenterons ces méthodes de mise en page une par une et fournirons des exemples de code spécifiques.

1. Disposition de tableau traditionnelle :
   La disposition de tableau traditionnelle est basée sur la balise <table> en HTML. Utilisez les balises <code><tr> et <code><td> pour définir les lignes et les colonnes afin d'implémenter la disposition des éléments. Cette méthode de mise en page est relativement facile à mettre en œuvre dans certaines situations simples, mais dans des scénarios de mise en page complexes, elle entraînera un code long et une maintenance difficile. <code><table>标签的。通过<code><tr>和<code><td>标签来设置行和列，实现元素的布局。这种布局方式在一些简单的情况下还是比较容易实现的，但是在复杂的布局场景下，会导致代码冗长、维护困难。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;table&gt; &lt;tr&gt; &lt;td&gt;内容1&lt;/td&gt; &lt;td&gt;内容2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;内容3&lt;/td&gt; &lt;td&gt;内容4&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><ol start="2"><li>浮动布局：<br>浮动布局是通过设置元素的<code>float属性来实现的，在浮动元素前面的内容将环绕在其周围。但是，浮动布局容易产生脱离文档流的问题，需要额外处理清除浮动，且在响应式布局中的适配性有限。

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    float: right;
    width: 100px;
  }
</style>

<div class="left">左边内容</div>
<div class="right">右边内容</div>
<div style="clear: both;"></div>

3. 定位布局：
   定位布局是通过设置元素的position属性来实现的。常用的定位方式有相对定位relative、绝对定位absolute和固定定位fixed

<style>
  .container {
    position: relative;
    width: 200px;
    height: 200px;
  }
  .box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
  }
</style>

<div class="container">
  <div class="box">定位内容</div>
</div>

Copier après la connexion
Mise en page flottante :
La mise en page flottante est obtenue en définissant l'attribut float de l'élément, et le contenu devant l'élément flottant s'enroulera autour de lui. Cependant, la mise en page flottante est sujette au problème d'être séparée du flux de documents, nécessitant un traitement supplémentaire pour effacer les flottants, et a une adaptabilité limitée dans les mises en page réactives.
4. 
   

   <style>
     .container {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 200px;
     }
   </style>
   
   <div class="container">
     <div>Flexbox布局内容</div>
   </div>

   Copier après la connexion
   Disposition du positionnement :
   La disposition du positionnement est obtenue en définissant l'attribut position de l'élément. Les méthodes de positionnement couramment utilisées incluent le positionnement relatif relatif, le positionnement absolu absolu et le positionnement fixe fixe. La disposition du positionnement est également plus flexible, mais dans une disposition réactive, elle nécessite de multiples ajustements et calculs de position.

   5. <style>
        .container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr;
          grid-gap: 10px;
        }
      </style>
      
      <div class="container">
        <div>Grid布局内容1</div>
        <div>Grid布局内容2</div>
      </div>

      Copier après la connexion
      
      Mise en page Flexbox : La mise en page Flexbox est une nouvelle méthode de mise en page en CSS3, qui peut ajuster et contrôler de manière flexible la taille, la position, l'ordre, etc. des éléments. Il convient à une disposition unidimensionnelle, c'est-à-dire une disposition en lignes ou en colonnes.
      rrreee🎜🎜Mise en page en grille : 🎜La mise en page en grille est une nouvelle méthode de mise en page bidimensionnelle en CSS3, qui contrôle la mise en page via des lignes et des colonnes de grille. Il peut mieux mettre en œuvre des besoins de mise en page complexes et prend en charge une mise en page adaptative et réactive. 🎜🎜rrreee🎜Ce qui précède sont des exemples de codes pour plusieurs méthodes de mise en page courantes. Dans le développement réel, nous pouvons choisir une méthode de mise en page appropriée en fonction de besoins spécifiques, ou combiner plusieurs méthodes de mise en page pour obtenir une mise en page Web plus complexe. Dans le même temps, nous devons également prêter attention à l’adaptation réactive de la mise en page pour s’adapter à l’utilisation de différentes tailles d’écran et d’appareils. 🎜

   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!