Métrique des dimensions

3.1 Propriété width

Les dimensions des blocs en CSS jouent un rôle crucial dans la création de mises en page de pages web. Elles déterminent comment les éléments vont s'afficher et interagir avec les éléments qui les entourent. On va maintenant étudier les propriétés width, height, max-width et max-height, qui permettent de définir les dimensions des blocs.

La propriété width définit la largeur d'un élément. Elle peut être spécifiée dans différentes unités de mesure, telles que les pixels (px), les pourcentages (%), em, rem et d'autres.

Valeurs

• Valeur automatique: auto — la largeur de l'élément est déterminée automatiquement en fonction de son contenu et de son environnement
• Unités absolues: px, pt, cm, mm, in et d'autres
• Unités relatives: %, em, rem, vw, vh et d'autres

Exemple d'utilisation:

    
      .box {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-fixed {
        width: 200px;
      }

      .box-percentage {
        width: 50%;
      }
    
  

    
      <div class="box box-fixed">Largeur fixe (200px)</div>
      <div class="box box-percentage">Largeur en pourcentage (50%)</div>
    
  

Explication du code :

• .box-fixed : un élément avec une largeur fixe de 200 pixels
• .box-percentage : un élément avec une largeur de 50% de son élément parent

3.2 Propriété height

La propriété height définit la hauteur d'un élément. Elle peut également être spécifiée dans différentes unités de mesure.

Valeurs :

• Valeur automatique: auto — la hauteur de l'élément est déterminée automatiquement en fonction de son contenu et de son environnement
• Unités absolues: px, pt, cm, mm, in et d'autres
• Unités relatives: %, em, rem, vh, vw et d'autres

Exemple d'utilisation:

    
      .container {
        height: 300px;
      }

      .box {
        color: white;
        padding: 10px;
      }

      .box-fixed-height {
        height: 150px;
        background-color: #2ecc71;
      }

      .box-percentage-height {
        height: 50%;
        background-color: #7a5c71;
      }
    
  

    
      <div class="container">
        <div class="box box-fixed-height">Hauteur fixe (150px)</div>
        <div class="box box-percentage-height">Hauteur en pourcentage (50%)</div>
      </div>
    
  

Explication du code :

• .box-fixed-height : un élément avec une hauteur fixe de 150 pixels
• .box-percentage-height : un élément avec une hauteur de 50% de son élément parent

3.3 Propriété max-width

La propriété max-width définit la largeur maximale d'un élément. C'est une limitation qui empêche l'élément de s'étendre au-delà de la valeur spécifiée.

Valeurs :

• Aucune limite: none — l'élément peut s'étendre à n'importe quelle largeur
• Unités absolues: px, pt, cm, mm, in et d'autres
• Unités relatives: %, em, rem, vh, vw et d'autres

Exemple d'utilisation:

    
      .box {
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-max-width {
        width: 100%;
        max-width: 300px;
      }
    
  

    
      <div class="box">Largeur 100% (par défaut)</div>
      <div class="box box-max-width">Largeur maximale 300px</div>
    
  

Explication du code :

• .box-max-width : un élément avec une largeur maximale de 300 pixels. Le contenu ne permettra pas à l'élément de s'étendre au-delà de 300 pixels

3.4 Propriété max-height

La propriété max-height définit la hauteur maximale d'un élément. C'est une limitation qui empêche l'élément de croître au-delà de la valeur spécifiée.

Valeurs :

• Aucune limite: none — l'élément peut s'étendre à n'importe quelle largeur
• Unités absolues: px, pt, cm, mm, in et d'autres
• Unités relatives: %, em, rem, vh, vw et d'autres

Exemple d'utilisation:

    
      .box {
        background-color: #9b59b6;
        color: white;
        padding: 10px;
        max-height: 35px;
        overflow: auto;
      }
    
  

    
      <div class="box">
        <p>Texte supplémentaire pour démontrer le défilement.<br>Texte supplémentaire pour démontrer le défilement.<br>Texte supplémentaire pour démontrer le défilement.</p>
      </div>
    
  

Explication du code :

• .box-max-height : un élément avec une hauteur maximale de 100 pixels. Si le contenu de l'élément dépasse cette valeur, il sera défilé grâce à la propriété overflow: auto;