Les.trois.concepts.CSS.les.plus.importants.à.comprendre.sont.le.flottement,.le.positionnement.et.le.modèle.de.boîte..Ils.déterminent.la.disposition.des.éléments.de.la.page.et.forment.
ainsi.la.base.des.mises.en.page.CSS..Si.vous.êtes.habitué.à.créer.des.maquettes.tabulaires,.ces.
notions.pourront.paraître.étranges.au.premier.abord..En.fait,.la.plupart.des.développeurs.doivent.passer.un.certain.temps.à.créer.des.sites.en.CSS.avant.de.bien.comprendre.les.tenants.
et.les.aboutissants.du.modèle.de.boîte,.la.différence.entre.le.positionnement.absolu.et.le.
positionnement.relatif,.et.le.fonctionnement.du.flottement.et.de.la.propriété.clear..Le.développement.des.sites.CSS.sera.plus.facile.lorsque.vous.aurez.vraiment.assimilé.ces.concepts.
Au.cours.de.ce.chapitre,.vous.découvrirez :
• les.complexités.et.les.particularités.du.modèle.de.boîte ;
• comment.et.pourquoi.les.marges.s’effondrent ;
• la.différence.entre.positionnement.absolu.et.positionnement.relatif ;
• le.fonctionnement.des.propriétés.float.et.clear.
Récapitulatif sur le modèle de boîte
Le.modèle.de.boîte.est.l’une.des.pierres.d’angle.des.CSS..Il.définit.la.manière.dont.les.éléments.s’affichent.et,.dans.une.certaine.mesure,.comment.ils.interagissent.les.uns.avec.les.
autres..Chaque.élément.dans.la.page.est.considéré.comme.une.boîte.rectangulaire.composée.
du.contenu.de.l’élément,.d’un.remplissage,.d’une.bordure.et.de.marges.(voir.Figure 3.1).
Figure 3.1
Illustration du modèle
de boîte.
Marge
Bordure
Remplissage
Zone de contenu
Le.remplissage.s’applique.autour.de.la.zone.de.contenu..Quand.on.ajoute.un.arrière-plan.à.
un.élément,.il.est.appliqué.à.la.zone.formée.par.le.contenu.et.le.remplissage..C’est.la.raison.
pour.laquelle.le.remplissage.est.souvent.utilisé.pour.créer.une.gouttière.autour.du.contenu.
afin.de.donner.l’impression.qu’il.ne.déborde.pas.sur.les.côtés.de.l’arrière-plan..La.bordure.
affiche.une.ligne.à.l’extérieur.de.la.zone.remplie..Différents.styles.de.ligne.sont.proposés :.
continue,.en.pointillé.ou.à.tirets..À l’extérieur.de.la.bordure.figure.une.marge..Les.marges.
sont.transparentes.et.ne.se.voient.pas..Elles.sont.généralement.utilisées.pour.contrôler.l’espacement.entre.les.éléments.
Vue d’ensemble du modèle
de formatage visuel
3
ainsi.la.base.des.mises.en.page.CSS..Si.vous.êtes.habitué.à.créer.des.maquettes.tabulaires,.ces.
notions.pourront.paraître.étranges.au.premier.abord..En.fait,.la.plupart.des.développeurs.doivent.passer.un.certain.temps.à.créer.des.sites.en.CSS.avant.de.bien.comprendre.les.tenants.
et.les.aboutissants.du.modèle.de.boîte,.la.différence.entre.le.positionnement.absolu.et.le.
positionnement.relatif,.et.le.fonctionnement.du.flottement.et.de.la.propriété.clear..Le.développement.des.sites.CSS.sera.plus.facile.lorsque.vous.aurez.vraiment.assimilé.ces.concepts.
Au.cours.de.ce.chapitre,.vous.découvrirez :
• les.complexités.et.les.particularités.du.modèle.de.boîte ;
• comment.et.pourquoi.les.marges.s’effondrent ;
• la.différence.entre.positionnement.absolu.et.positionnement.relatif ;
• le.fonctionnement.des.propriétés.float.et.clear.
Récapitulatif sur le modèle de boîte
Le.modèle.de.boîte.est.l’une.des.pierres.d’angle.des.CSS..Il.définit.la.manière.dont.les.éléments.s’affichent.et,.dans.une.certaine.mesure,.comment.ils.interagissent.les.uns.avec.les.
autres..Chaque.élément.dans.la.page.est.considéré.comme.une.boîte.rectangulaire.composée.
du.contenu.de.l’élément,.d’un.remplissage,.d’une.bordure.et.de.marges.(voir.Figure 3.1).
Figure 3.1
Illustration du modèle
de boîte.
Marge
Bordure
Remplissage
Zone de contenu
Le.remplissage.s’applique.autour.de.la.zone.de.contenu..Quand.on.ajoute.un.arrière-plan.à.
un.élément,.il.est.appliqué.à.la.zone.formée.par.le.contenu.et.le.remplissage..C’est.la.raison.
pour.laquelle.le.remplissage.est.souvent.utilisé.pour.créer.une.gouttière.autour.du.contenu.
afin.de.donner.l’impression.qu’il.ne.déborde.pas.sur.les.côtés.de.l’arrière-plan..La.bordure.
affiche.une.ligne.à.l’extérieur.de.la.zone.remplie..Différents.styles.de.ligne.sont.proposés :.
continue,.en.pointillé.ou.à.tirets..À l’extérieur.de.la.bordure.figure.une.marge..Les.marges.
sont.transparentes.et.ne.se.voient.pas..Elles.sont.généralement.utilisées.pour.contrôler.l’espacement.entre.les.éléments.
Vue d’ensemble du modèle
de formatage visuel
3