Ce diaporama n’est pas le cours, il en donne la trame. Le cours complet est sur la page de la leçon.
Premiers pas en CSS
Mise en page CSS
Comment les éléments se rangent
Les éléments block
- Prennent toute la largeur de leur parent.
- Sont suivis d’un retour à la ligne.
body,div,p,h1…
On parle de flux vertical.
Ils sont redimensionnables
Même s’ils ne prennent pas toute la largeur de leur parent, ils la réservent.
On parle d’empreinte dans le flux.
Les éléments inline
- Prennent la largeur de leur contenu.
- Ne sont pas suivis d’un retour à la ligne.
span,a,strong,em…
On parle de flux horizontal.
Ils ne sont pas redimensionnables
Une largeur ou une hauteur données à un span sont ignorées.
Comment faire une rangée de boutons de même taille ?
L’inline-block
.bouton {
display: inline-block;
width: 120px;
}
Sur la ligne comme un inline, redimensionnable comme un block.
Emboîtements
tzi.fr/jeu-css-2
À vous
Reproduisez chaque dessin en emboîtant des boîtes block et inline-block.
Premiers pas en CSS
Block, inline, inline-block
Trois façons de se ranger, et display pour passer de l’une à l’autre.