Td 1 : Le flux normal
Explication
Le flux normal est le placement par défaut, à l'aide des marges internes (padding) du conteneur, soit des marges externes (margin) des éléments. Le flux régit l'agencement des différents éléments contenu dans le bloc conteneur. Il s'agit donc d'un traitement linéaire du contenu de la page. Les boîtes appartiennent à un contexte de mise en forme, soit en bloc ou en ligne :
Le flux normal en bloc : Les boîtes sont placées l'une après l'autre verticalement, en commençant en haut du bloc conteneur. Les propriétés de marge régissent la distance verticale entre deux blocs successifs.Comme il s'agit d'éléments de type bloc, la marge gauche de chaque élément est alignée sur la marge de l'élément conteneur, c'est-à-dire ici le bloc conteneur initial.
Le flux normal en ligne : Les boîtes sont placées horizontalement, l'une après l'autre, en commençant en haut du bloc conteneur. Les marges, bordures et espacements sont conservés entre celles-ci. Les boîtes peuvent être alignées verticalement. En effet si le bloc a une largeur supérieure à la place disponible qui se trouve à droite du premier bloc, alors il viendra se placer en dessous du premier bloc.
Applications
Application 1 : Le flux normal
Enoncé : Pour illustrer ce mode, on crée un bloc jaune de 100x100px à 15px à partir de la gauche et 200px à partie du haut du conteneur :
Partie HTML :
<BODY>
<div class="conteneur">
<div class="bloc">
Bloc
</div>
</div>
</BODY>
Et la CSS correspondante :
.conteneur {
padding-top: 200px;
padding-left: 15px;
}
.bloc {
width: 100px;
height: 100px;
background-color: yellow;
}
Application 2 : Le flux normal en bloc
Enoncé : Pour illustrer ce mode, on crée un bloc conteneur qui contiendra tous les blocs. On y place un bloc A, appelé sous classe normal. Puis on place un second bloc, le bloc B à la suite dans une autre balise div.
Partie HTML :
<BODY>
<div class="conteneur">
<div class="normalA">
Bloc A
</div>
<div class="normalB">
Bloc B
</div>
</div>
</BODY>
Et la CSS correspondante :
.normalA {
width:150px;
height:150px;
background-color:red;
border:1px solid black;
}
.normalB {
width:250px ;
height:100px ;
background-color:green;
border:1px solid black;
}
Remarque : On peut constater que par défaut, le bloc A, appelé sous classe normal, s'est inséré en haut à gauche. Et que grâce à l'utilisation de la balise div, le navigateur à traiter successivement les deux éléments rencontrés en les affichant verticalement.
Application 3 : Le flux normal en ligne
Enoncé : Pour illustrer ce mode, on crée un bloc conteneur qui contiendra tous les blocs. On y place 2 blocs : normal C et normal D différenciés par leurs couleurs.
Partie HTML :
<BODY>
<div class="conteneur">
<span class="normalC">
Bloc C
</span>
<span class="normalD">
Bloc D
</span>
</div>
</BODY>
Et la CSS correspondante :
.normalC {
width:150px;
height:150px;
background-color:red;
border:1px solid black;
}
.normalD {
width:250px ;
height:100px ;
background-color:green;
border:1px solid black;
}
Remarque : On constate que par défaut, le bloc C s'est placé en haut à gauche. Et que grâce à l'utilisation de la balise span, le bloc D s'est placé juste à côté du bloc C, sur la même ligne.
Retour au plan du TD