CSS - le flux

Le code HTML d'une page web est interprété de manière séquentielle par les navigateurs qui affichent et interprètent les différentes balises HTML dans l'ordre où elles apparaissent dans la structure du code.
Cette affichage séquentiel se nomme le flux.

Billet créé le :
18 nov 2020

Relativement au flux, les balises peuvent se classer en 2 catégories :

  • Celles qui occupent toute la largeur de leur parent, et sont suivies d’un "retour à la ligne" :  
    • ce sont les balises de type bloc ;
  • Celles qui s'adaptent à la largeur de leur contenu, et ne sont pas suivies d’un retour à la ligne ( et s'affiche donc à la queue leu leu) :
    • ce sont les balises de type inline

1. Le type Bloc

Ces balises font référence à la largeur de leur parent.

Les principales balises de type bloc sont :

  • body 
  • div
  • p
  • h1....h6
  • ul
  • li

Les balises de type bloc s'afficheront les unes en dessous des autres, car chacune occupe toute la largeur de l'élément parent.

2. Le type Inline

Une balise de type "inline" est toujours incluse dans une balise de type bloc. En effet la 1ère balise <body> est de type bloc. Elle s'affiche donc dans l'élément de type bloc qui la contient et un occupe un espace qui s'adapte à son contenu.

Les principales balises de type "inline" sont :

  • span
  • a
  • strong et toutes les décorations du texte...

3. Un exemple

Ci-dessous, un exemple dans lequel s'affichent successivement :

  • un bloc div coloré en rouge ;
  • un 2nd bloc div, moins large (80% du body), coloré en beige  qui contient 2 blocs p (paragraphe) ;
    • le 1er bloc p occupe 40% du bloc div précédent ;
    • le 2nd bloc p occupe également 40% du bloc div précédent ;
  • un 3ème bloc div coloré en vert foncé ;
  • une succession de 4 éléments inline colorés : on observe qu'il n'y a plus de passage à la ligne tant que la largeur du bloc conteneur ("body") n'est pas complétée en entier.
  • un 4ème bloc div (donc passage à la ligne) contenant 4 éléments inline (copie des précédants), donc plus de passage à la ligne tant que la largeur du conteneur n'est pas complétée (ici div largeur 60%)
Cliquer pour agrandir l'image

NB1 : Contrairement à ce qui réalisé dans le fichier HTML de cette page, vous devez préférer déclarer vos styles dans un fichier séparé.

NB2 : Pour s'assurer d'un meilleur rendu  la balise body doit être stylisée. Par exemple

body{
    margin:0px auto 0px auto;
    padding:0px;
    width:80%;
}
Avec ce style, le corps de ma page occupe 80% de l'écran et ma page sera centrée.

Le code HTML

3. "Adapter" le flux

Il est cependant tout à fait possible de modifier le comportement par défaut décrit plus haut, et cela pour les éléments bloc comme pour les éléments inline.
C'est le rôle des propriétés CSS float, position et display.

  • float colle l'élément le plus près possible du bord droit ( float:right) ou gauche (float:left) de l'élément conteneur. Le reste du contenu suit les contours de cet élément flottant. Attention, le contenu flottant peut déborder du conteneur parent   (très utile pour réaliser des menus déroulants). Ce débordement peut être "contenu" par la propriété overflow.
  • position ; à l'aide d'au moins une des propriétés top, left, bottom, right, il est possible de définir la position d'un élément de type bloc à l'intérieur de son conteneur
    • soit en lui donnant une place fixe dans son conteneur (position:absolue) ;
    • soit en décalant l'affichage de l'élément relativement (position:relative) à sa position réelle dans le flux ;
  • display   modifie le comportement par défaut des types bloc et inline.
    • display : none rend l'élément invisible en le sortant du flux;
    • display : flex met au placard les types bloc et inline pour un nouveau modèle de "boîte" pour les navigateurs récents. La technologie flexbox est abordée dans le billet CSS - flexbox  et doit être utilisée en lieu et place des "display : inline" et "display : block". Pour information :
      • display : inline  s'applique sur élément de type bloc qui se comportera donc comme un élément de type inline.
        • on ne peut pas leur donner de largeur ;
        • pas de retour à la ligne avant l'affichage de l'élément inline suivant
      • display : block s'applique sur élément de type inline qui se comportera donc comme un élément de type bloc:
        • prend la largeur de l'élément conteneur ;
        • on peut jouer sur sa dimension et ses marges ;
        • est suivi d'un retour en début de ligne suivante ;