48
Maîtrise des CSS
Récapitulatif concernant le positionnement
Maintenant. que. vous. êtes. familiarisé. avec. le. modèle. de. boîte,. considérons. le. formatage.
visuel. et. les. modèles. de. positionnement.. Il. est. absolument. essentiel. de. comprendre. les.
nuances.de.ces.deux.modèles,.car.ils.contrôlent.ensemble.la.manière.dont.chacun.des.éléments.se.dispose.dans.la.page.
Le modèle de formatage visuel
On.fait.souvent.référence.aux.éléments.p,.h1.ou.div.comme.à.des.éléments.de.niveau.bloc..
Cela.signifie.qu’ils.s’affichent.comme.des.blocs.de.contenu.ou.des.boîtes.de.bloc..À l’inverse,.les.éléments.strong.ou.span.sont.des.éléments.incorporés,.car.leur.contenu.s’affiche.
à.l’intérieur.des.lignes,.sous.forme.de.boîtes.incorporées.dans.la.ligne..
Le.type.des.boîtes.peut.être.modifié.à.l’aide.de.la.propriété.display..Vous.pouvez.ainsi.
amener. un. élément. incorporé,. comme. une. ancre,. à. se. comporter. comme. un. élément. de.
niveau.bloc,.en.attribuant.la.valeur.block.à.sa.propriété.display..Vous.pouvez.également.
faire.en.sorte.qu’un.élément.ne.génère.pas.de.boîte.du.tout.en.attribuant.la.valeur.none.à.sa.
propriété.display..La.boîte,.et.donc.tout.son.contenu,.n’est.plus.affichée.et.ne.prend.aucun.
espace.dans.le.document.
Il.existe.trois.mécanismes.de.positionnement.de.base.en.CSS :.le.flux.normal.qui.joue.sur.
les.marges.et.remplissage,.la.flottaison,.avec.les.éléments.flottants,.et.la.position,.par.la.propriété.position..À moins.que.vous.ne.spécifiiez.un.autre.réglage,.les.boîtes.commencent.
toutes.par.se.positionner.dans.le.flux.de.base..La.position.de.la.boîte.d’un.élément.dans.le.
flux.de.base.est.déterminée.par.la.position.de.cet.élément.dans.le.code.HTML.
Les.boîtes.de.niveau.bloc.apparaissent.l’une.après.l’autre.verticalement..La.distance.verticale.entre.elles.est.calculée.en.fonction.de.leurs.marges.verticales.
Les. boîtes. incorporées. sont. disposées. horizontalement. dans. une. ligne.. Leur. espacement.
horizontal. peut. être. ajusté. avec. le. remplissage,. les. bordures. et. les. marges. de. gauche. et.
de.droite.(voir.Figure 3.9)..Le.remplissage,.les.bordures.et.les.marges.verticales.n’ont.en.
revanche.aucun.effet.sur.la.hauteur.de.la.boîte.incorporée..De.la.même.manière,.le.fait.de.
définir. une. hauteur. ou. une. largeur. explicite. sur. une. boîte. incorporée. n’a. aucun. effet.. La.
boîte. horizontale. formée. par. une. ligne. est. appelée. boîte. de. ligne.. Elle. est. toujours. assez.
grande.pour.toutes.les.boîtes.de.ligne.qu’elle.contient..
Il.existe.un.autre.piège,.cependant :.le.fait.de.définir.la.hauteur.de.ligne.peut.augmenter.la.
hauteur.de.la.boîte..Voilà.pourquoi.le.seul.moyen.de.modifier.les.dimensions.d’une.boîte.
incorporée. consiste. à. modifier. la. hauteur. de. ligne. ou. les. bordures,. le. remplissage. ou. les.
marges.de.gauche.et.de.droite.
Les.CSS 2.1.permettent.de.définir.la.propriété.display.d’un.élément.en.lui.attribuant.la.
valeur.inline-block..Cette.déclaration.intègre.l’élément.dans.la.ligne,.comme.s’il.s’agissait.d’un.élément.incorporé,.mais.amène.le.contenu.de.la.boîte.à.se.comporter.comme.si.la.
boîte.était.un.élément.de.niveau.bloc,.ce.qui.permet.de.définir.explicitement.les.largeurs,.les.
hauteurs,.les.marges.verticales.et.le.remplissage..Dans.l’ensemble,.cette.propriété.a.été.mal.
prise.en.charge,.ce.qui.explique.qu’elle.reste.méconnue..Elle.est.maintenant.prise.en.charge.
Maîtrise des CSS
Récapitulatif concernant le positionnement
Maintenant. que. vous. êtes. familiarisé. avec. le. modèle. de. boîte,. considérons. le. formatage.
visuel. et. les. modèles. de. positionnement.. Il. est. absolument. essentiel. de. comprendre. les.
nuances.de.ces.deux.modèles,.car.ils.contrôlent.ensemble.la.manière.dont.chacun.des.éléments.se.dispose.dans.la.page.
Le modèle de formatage visuel
On.fait.souvent.référence.aux.éléments.p,.h1.ou.div.comme.à.des.éléments.de.niveau.bloc..
Cela.signifie.qu’ils.s’affichent.comme.des.blocs.de.contenu.ou.des.boîtes.de.bloc..À l’inverse,.les.éléments.strong.ou.span.sont.des.éléments.incorporés,.car.leur.contenu.s’affiche.
à.l’intérieur.des.lignes,.sous.forme.de.boîtes.incorporées.dans.la.ligne..
Le.type.des.boîtes.peut.être.modifié.à.l’aide.de.la.propriété.display..Vous.pouvez.ainsi.
amener. un. élément. incorporé,. comme. une. ancre,. à. se. comporter. comme. un. élément. de.
niveau.bloc,.en.attribuant.la.valeur.block.à.sa.propriété.display..Vous.pouvez.également.
faire.en.sorte.qu’un.élément.ne.génère.pas.de.boîte.du.tout.en.attribuant.la.valeur.none.à.sa.
propriété.display..La.boîte,.et.donc.tout.son.contenu,.n’est.plus.affichée.et.ne.prend.aucun.
espace.dans.le.document.
Il.existe.trois.mécanismes.de.positionnement.de.base.en.CSS :.le.flux.normal.qui.joue.sur.
les.marges.et.remplissage,.la.flottaison,.avec.les.éléments.flottants,.et.la.position,.par.la.propriété.position..À moins.que.vous.ne.spécifiiez.un.autre.réglage,.les.boîtes.commencent.
toutes.par.se.positionner.dans.le.flux.de.base..La.position.de.la.boîte.d’un.élément.dans.le.
flux.de.base.est.déterminée.par.la.position.de.cet.élément.dans.le.code.HTML.
Les.boîtes.de.niveau.bloc.apparaissent.l’une.après.l’autre.verticalement..La.distance.verticale.entre.elles.est.calculée.en.fonction.de.leurs.marges.verticales.
Les. boîtes. incorporées. sont. disposées. horizontalement. dans. une. ligne.. Leur. espacement.
horizontal. peut. être. ajusté. avec. le. remplissage,. les. bordures. et. les. marges. de. gauche. et.
de.droite.(voir.Figure 3.9)..Le.remplissage,.les.bordures.et.les.marges.verticales.n’ont.en.
revanche.aucun.effet.sur.la.hauteur.de.la.boîte.incorporée..De.la.même.manière,.le.fait.de.
définir. une. hauteur. ou. une. largeur. explicite. sur. une. boîte. incorporée. n’a. aucun. effet.. La.
boîte. horizontale. formée. par. une. ligne. est. appelée. boîte. de. ligne.. Elle. est. toujours. assez.
grande.pour.toutes.les.boîtes.de.ligne.qu’elle.contient..
Il.existe.un.autre.piège,.cependant :.le.fait.de.définir.la.hauteur.de.ligne.peut.augmenter.la.
hauteur.de.la.boîte..Voilà.pourquoi.le.seul.moyen.de.modifier.les.dimensions.d’une.boîte.
incorporée. consiste. à. modifier. la. hauteur. de. ligne. ou. les. bordures,. le. remplissage. ou. les.
marges.de.gauche.et.de.droite.
Les.CSS 2.1.permettent.de.définir.la.propriété.display.d’un.élément.en.lui.attribuant.la.
valeur.inline-block..Cette.déclaration.intègre.l’élément.dans.la.ligne,.comme.s’il.s’agissait.d’un.élément.incorporé,.mais.amène.le.contenu.de.la.boîte.à.se.comporter.comme.si.la.
boîte.était.un.élément.de.niveau.bloc,.ce.qui.permet.de.définir.explicitement.les.largeurs,.les.
hauteurs,.les.marges.verticales.et.le.remplissage..Dans.l’ensemble,.cette.propriété.a.été.mal.
prise.en.charge,.ce.qui.explique.qu’elle.reste.méconnue..Elle.est.maintenant.prise.en.charge.