CSS - le flux

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

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

  • Celles qui occupe toute la largeur de leur parent, et sont suivis d’un retour à la ligne : les balises de type bloc ;
  • Celles qui prennent la largeur de leur contenu, et ne sont pas suivis d’un retour à la ligne (s'affiche donc à la queue leu leu) : les balise 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 :

  • 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 par défaut incluse dans une balise de type bloc (car body est un type bloc).

Elle s'affiche dans l'élément de type bloc qui la contient et un occupe un espace qui colle à 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 bloc 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
  • 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%)

Le rendu

 

 

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.

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 et position.

  • 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 l'é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, 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 ;

4. Changement de type

La propriété display permet de modifier le comportement par défaut des types bloc et inline.

  • 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 ;
  • display : inline-block pour un affichage en ligne d'un type bloc (pas de retour en début de ligne) avec possibilité de jouer sur les dimensions et les marges ;
  • display : flex qui met au placard les types bloc et inline pour un nouveau modèle de "boîte" pour les navigateurs récents. Voir ce billet
  • display : none rend l'élément invisible en le sortant du flux;