Les paragraphes suivants décrivent les types de boîtes susceptibles d'être générées en CSS2. Le type d'une boîte affecte en partie son comportement dans le modèle de mise en forme visuel. La propriété 'display' spécifie le type d'une boîte, celle−ci est décrite plus loin.
9.2.1 Les éléments de type bloc et leurs boîtes
Les éléments de type bloc sont ceux des éléments du document source dont le rendu visuel forme un bloc (ex.
les paragraphes). La propriété 'display' admet des valeurs qui confèrent un type bloc à un élément : 'block', 'list−item', 'compact' et 'run−in' (dans certains cas ; voir les passages traitant des boîtes compactes et des boîtes en enfilade), et 'table'.
Les éléments de type bloc génèrent une boîte de bloc principale qui ne contient que des boîtes de bloc. La boîte de bloc principale établit le bloc conteneur des boîtes des descendants et du contenu généré, c'est aussi celle−ci qui intervient dans le schéma de positionnement. La boîte de bloc principale participe au contexte de mise en forme de type bloc.
D'autres éléments de type bloc génèrent des boîtes supplémentaires hors de la boîte principale : ceux des éléments qui ont une valeur 'list−item' et ceux qui ont des marqueurs. Ces boîtes se positionnent en fonction de la boîte principale.
Les boîtes de bloc anonymes
Dans un document tel que celui−ci :
<DIV>
Du texte
<P>Plus de texte
</DIV>
À supposer que les éléments DIV et P aient tous deux la valeur 'display: block', l'élément DIV accueille à la fois un contenu de type en−ligne et un contenu de type bloc. Pour illustrer leur formatage, nous considérons que "Du texte" est contenu dans une boîte de bloc anonyme.
Schéma montrant trois boîtes, l'une d'entre elles est anonyme.
Autrement dit, quand une boîte de bloc (comme ici celle produite par l'élément DIV) contient une autre boîte de bloc (comme l'élément P), alors on la contraint à n'avoir que des boîtes de bloc, les éléments de type en−ligne étant emballés dans une boîte de bloc anonyme.
Exemple(s) :
Ce modèle s'appliquerait à l'exemple suivant :
/* Note : les agents utilisateurs en HTML peuvent ne pas respecter ces règles */
BODY { display: inline } P { display: block }
Ces règles étant appliquées à ce document HTML :
<!DOCTYPE HTML PUBLIC "−//W3C//DTD HTML 4.0 Transitional//EN">
<HEAD>
<TITLE>Un texte anonyme interrompu par un bloc</TITLE>
</HEAD>
<BODY>
Voici un texte anonyme avant le P.
<P>Ceci est le contenu de P.</P>
Voici un texte anonyme après le P.
</BODY>
L'élément BODY contient un morceau (noté C1) de texte anonyme suivi par un élément de type bloc, suivi encore par un autre morceau (C2) de texte anonyme. La mise en forme finale aboutirait à une boîte de bloc anonyme pour l'élément BODY, celle−ci contiendrait une boîte de bloc anonyme enveloppant C1, la boîte de bloc de l'élément P et une autre boîte de bloc anonyme pour C2.
Les propriétés des boîtes anonymes héritent des valeurs des propriétés de la boîte non−anonyme qui les contient (par exemple dans le schéma au−dessus, celle de l'élément DIV). Les propriétés qui ne sont pas héritées conservent leur valeur initiale. Par exemple dans le schéma, la boîte anonyme hérite de la police de l'élément DIV mais ses marges auront une valeur de 0.
9.2.2 Les éléments de type en−ligne et leurs boîtes
Les éléments de type en−ligne sont ceux des éléments du document source qui n'ont pas la forme de nouveaux blocs de contenu ; ce contenu est distribué en lignes (ex. des parties de texte accentué dans un paragraphe, des images dans une ligne, etc.). La propriété 'display' admet des valeurs qui confèrent un type en−ligne à un élément : 'inline', 'inline−table', 'compact' et 'run−in' (dans certains cas, voir les passages traitant des boîtes compactes et des boîtes en enfilade). Les éléments de type en−ligne génèrent des boîtes en−ligne.
Les boîtes en−ligne peuvent participer à plusieurs contextes de mise en forme :
Dans une boîte de bloc, celle−ci répond à un contexte de mise en forme en−ligne ;
•
Quand c'est une boîte en−ligne compacte, elle se positionne dans la marge d'une boîte de bloc ;
•
Les boîtes des marqueurs se positionnent aussi en dehors d'une boîte de bloc.
•
Les boîtes en−ligne anonymes
Dans cet extrait de document :
<P>Du texte <EM>accentué</em> en exemple</P>
L'élément P génère une boîte de bloc contenant plusieurs boîtes en−ligne. Une boîte en−ligne pour "accentué" est produite par l'élément de type en−ligne (EM), mais c'est un élément de type bloc (P) qui génère les autres boîtes en−ligne pour "Du texte" et "en exemple". Ces dernières sont appelées boîtes en−ligne anonymes, car elles ne sont pas associées à un élément en−ligne.
Ces genres de boîtes héritent des propriétés de celles de leur parent de type bloc. Les propriétés non transmissibles conservent leur valeur initiale. Dans l'exemple précédent, la couleur des boîtes anonymes initiales est héritée de l'élément P, mais leurs fonds restent transparents.
Pour cette spécification, on emploiera simplement l'expression boîte anonyme pour désigner les boîtes anonymes de type en−ligne ou bloc, quand le contexte détermine sans ambiguïté leur type.
D'autres types de boîtes anonymes sont produites lors de la mise en forme des tables.
9.2.3 Les boîtes compactes
Le comportement d'une boîte compacte se définit ainsi :
Quand une boîte de bloc (celle−ci n'étant pas flottante ni n'ayant un positionnement absolu) suit une boîte compacte, celle−ci prend la forme d'une boîte en−ligne sur une ligne. La largeur de la boîte résultante se compare à l'une des marges latérales de la boîte de bloc. On détermine laquelle des marges gauche ou droite employer selon la valeur de la propriété 'direction' de l'élément qui génère le bloc conteneur de la boîte compacte et des suivantes. Si la largeur de la boîte en−ligne est inférieure ou égale à celle de la marge, celle−ci est positionnée dans la marge de la façon décrite juste après.
•
Autrement, la boîte compacte devient une boîte de bloc.
•
La position de la boîte compacte dans la marge est la suivante : elle se trouve en dehors (à droite ou à gauche) de la première boîte de ligne du bloc, et elle en affecte le calcul de la hauteur. La propriété 'vertical−align' de la boîte
compacte détermine sa position verticale en fonction de cette boîte de ligne. La boîte compacte a toujours une position horizontale dans la marge de la boîte de bloc.
Un élément dont le formatage ne tient pas sur une ligne ne peut pas se trouver dans la marge de l'élément qui le suit. Par exemple en HTML, un élément avec une valeur 'compact' et qui contient un élément BR aura toujours un type de boîte bloc (en considérant que le comportement par défaut de BR consiste en l'insertion d'un caractère de mise à la ligne). Pour le placement d'un texte sur plusieurs lignes dans la marge, la propriété 'float' est souvent mieux appropriée.
Voici l'illustration d'une boîte compacte :
<!DOCTYPE HTML PUBLIC "−//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Un exemple de boîte compacte</TITLE>
<STYLE type="text/css">
DT { display: compact }
Cet exemple pourrait être rendu ainsi :
Court Ici une description.
Trop long pour la marge
Ici une autre description.
On peut utiliser la propriété 'text−align' pour aligner l'élément compacte dans la marge : contre le bord gauche de la marge (avec la valeur 'left'), contre le bord droit ('right') ou au centre ('center'). La valeur 'justify' ne s'applique pas, celle−ci sera considérée comme étant 'left' ou 'right', selon la valeur de la propriété 'direction' de l'élément de type bloc dans les marges duquel l'élément compact se trouve (si la valeur de la propriété 'direction' est 'ltr', ce sera 'left', si c'est 'rtl', ce sera 'right').
Consulter le chapitre traitant du contenu généré pour des informations sur l'interaction entre les boîtes compactes et le contenu généré.
9.2.4 Les boîtes en enfilade
Le comportement d'une boîte en enfilade se définit ainsi :
Quand une boîte de bloc (celle−ci n'étant pas flottante ni n'ayant un positionnement absolu) suit la boîte en enfilade, cette dernière devient la première boîte en−ligne de la boîte de bloc ;
•
Autrement, la boîte en enfilade devient une boîte de bloc.
•
Une boîte en enfilade présente un intérêt pour les titres en enfilade, ainsi cet exemple :
<!DOCTYPE HTML PUBLIC "−//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Un exemple de boîte en enfilade</TITLE>
<STYLE type="text/css">
H3 { display: run−in } </STYLE>
</HEAD>
<BODY>
<H3>Un titre en enfilade.</H3>
<P>Et un paragraphe qui le suit.
</BODY>
</HTML>
Cet exemple pourrait être rendu ainsi :
Un titre en enfilade. Et un paragraphe qui le suit.
L'élément en enfilade hérite de celles de son parent dans la source, et non de celles de la boîte de bloc dont il fait visuellement partie.
Consulter le chapitre traitant du contenu généré pour des informations sur l'interaction entre les boîtes en enfilade et le contenu généré.
9.2.5 La propriété 'display'
'display'
Valeur :
inline | block | list−item | run−in | compact | marker | table | inline−table | table−row−group | table−header−group | table−footer−group | table−row | table−column−group | table−column
| table−cell | table−caption | none | inherit Initiale : inline
Les valeurs de cette propriété ont le sens suivant : block
induit un élément à générer une boîte de bloc principale ; inline
induit un élément à générer une ou plusieurs boîtes en−ligne ; list−item
induit un élément (ex. l'élément LI en HTML) à générer une boîte de bloc principale et une boîte en−ligne pour un item de liste ; Consulter la partie traitant des listes pour des informations et des exemples de mise en forme de celles−ci ;
marker
Cette valeur précise la qualité de marqueur du contenu généré apparaîssant avant ou après une boîte. Elle ne devrait être employée qu'avec les pseudo−éléments :before et :after liés à des éléments de type bloc.
Dans certains cas, cette valeur est interprétée comme 'inline'. Consulter le chapitre sur les marqueurs pour plus d'informations ;
none
cette valeur fait qu'aucune boîte n'est générée par l'élément dans la structure de formatage (c.à.d., cet élément n'a pas d'influence sur la mise en forme du document). Les éléments qui en descendent ne génèrent pas de boîtes non plus ; on ne peut plus modifier leur comportement avec la propriété 'display'.
Noter qu'une valeur 'none' ne crée pas de boîte invisible, elle ne crée pas de boîte du tout. CSS comprend des mécanismes permettant la génération de boîtes dans la structure de formatage, boîtes qui influencent la mise en forme mais qui ne sont pas visibles. Consulter la partie traitant de la visibilité pour les détails ; run−in et compact
ces valeurs créent une boîte de bloc ou en−ligne, selon le contexte. Les propriétés s'appliquent aux boîtes compactes ou en enfilade en fonction de leur statut final (types bloc ou en−ligne). Par exemple, la propriété 'white−space' ne s'applique que si la boîte a un type bloc ;
table, inline−table, table−row−group, table−column, table−column−group, table−header−group, table−footer−group, table−row, table−cell et table−caption
ces valeurs donnent à un élément le comportement de celui d'une table (avec les restrictions décrites au chapitre sur les tables).
Noter que, malgré la valeur intiale 'inline' de la propriété 'display', les règles de la feuille de style par défaut de l'agent utilisateur peuvent surclasser celle−ci. Voir dans l'appendice traitant de la proposition de feuille de style pour HTML 4.0.
Exemple(s) :
Voici des exemples pour la propriété 'display' :
P { display: block } EM { display: inline } LI { display: list−item }
IMG { display: none } /* Les images ne sont pas affichées */
Les agents utilisateurs conformes pour HTML peuvent ignorer la propriété 'display'.
9.3 Les schémas de positionnement
En CSS2, trois schémas de positionnement peuvent déterminer l'emplacement d'une boîte :
Le flux normal. En CSS2, celui−ci inclus le formatage en bloc des boîtes de bloc, le formatage en−ligne des boîtes en−ligne, le positionnement relatif des boîtes de bloc ou en−ligne, et le positionnement des boîtes compactes et en enfilade ;
1.
Les flottants. Dans ce modèle, une boîte est d'abord positionnée selon le flux normal, puis elle en est extirpée et repoussée le plus possible vers la droite ou la gauche. Le contenu peut s'écouler le long d'un flottant.
2.
Le positionnement absolue. Dans ce modèle, une boîte est compètement retirée du flux normal (elle n'a pas d'influence sur les éléments de même degré de parenté survenant après elle), et est positionnée en fonction d'un bloc conteneur.
3.
Note : Les schémas de positionnement CSS2 aident les auteurs à rendre leurs documents plus accessibles, leur évitant de tricher avec le balisage pour obtenir des effets de mise en page (ex. les images transparentes).
9.3.1 Le choix d'un schéma de positionnement : la propriété 'position'
Les propriétés 'position' et 'float' déterminent lequel des algorithmes de positionnement employer pour le calcul de l'emplacement d'une boîte.
'position'
Valeur : static | relative | absolute | fixed | inherit Initiale : static
S'applique à : tous les éléments, sauf à un contenu généré
Héritée : non
Pourcentage : sans objet Médias : visuel
Les valeurs de cette propriété ont le sens suivant : static
La boîte est normale, placée selon le flux normal. Les propriétés 'left', 'top', 'right' et 'bottom' ne s'y appliquent pas ;
relative
L'emplacement de la boîte est calculé selon le normal flow (ce qu'on appelle la position dans le flux normal). Ensuite la boîte est déplacée relativement à cette position dans le flux normal. Quand une boîte B a une position relative, l'emplacement de la boîte suivante est calculé comme si B n'avait pas été déplacée
; absolute
L'emplacement de la boîte (et éventuellement sa taille) est déterminé par les propriétés 'left', 'right', 'top', et 'bottom'. Celles−ci spécifient les déplacements en fonction du bloc conteneur. Les boîtes en position absolue se situent hors du flux normal. Elles n'ont ainsi aucune influence sur la mise en forme des autres éléments de même degré de parenté. Bien que les boîtes en position absolue aient également des marges, celles−ci ne fusionnent pas avec d'autres marges ;
fixed
L'emplacement de la boîte est calculé comme pour 'absolute', mais la boîte est en plus fixe par rapport à une référence donnée. Pour les médias continus, par rapport à l'espace de visualisation (la boîte ne bouge pas lors d'un défilement). Pour les médias paginés, par rapport à la page, même si celle−ci apparaît dans un espace de visualisation (par exemple lors d'une prévue avant impression). Les auteurs peuvent
souhaiter un tel comportement en fonction d'un média donné. Par exemple, une boîte qui reste fixe en haut de l'écran d'un espace de visualisation, mais pas en haut de chaque page imprimée. Ils peuvent indiquer des spécifications séparées à l'aide d'une règle @media comme ceci :
Exemple(s) :
@media screen {
H1#first { position: fixed } }
@media print {
H1#first { position: static } }
9.3.2 Les décalages des boîtes : les propriétés 'top', 'right', 'bottom', 'left'
On dit qu'un élément est positionné quand la valeur de sa propriété 'position' est autre que 'static'. Ces éléments génèrent des boîtes positionnées qui sont disposées selon les quatres propriétés suivantes :
'top'
Valeur : <longueur> | <pourcentage> | auto | inherit Initiale : auto
S'applique à : ceux des éléments positionnés
Héritée : non
Pourcentage : se rapporte à la hauteur du bloc conteneur Médias : visuel
Cette propriété spécifie le décalage du bord de la marge du haut d'une boîte par rapport à celui de la boîte du bloc conteneur.
'right'
Valeur : <longueur> | <pourcentage> | auto | inherit Initiale : auto
S'applique à : ceux des éléments positionnés
Héritée : non
Pourcentage : se rapporte à la largeur du bloc conteneur Médias : visuel
Cette propriété spécifie le décalage du bord droit du contenu d'une boîte par rapport à celui de la boîte du bloc conteneur.
'bottom'
Valeur : <longueur> | <pourcentage> | auto | inherit Initiale : auto
S'applique à : ceux des éléments positionnés
Héritée : non
Pourcentage : se rapporte à la hauteur du bloc conteneur Médias : visuel
Cette propriété spécifie le décalage du bord du bas du contenu d'une boîte par rapport à celui de la boîte du bloc conteneur.
'left'
Valeur : <longueur> | <pourcentage> | auto | inherit Initiale : auto
S'applique à : ceux des éléments positionnés
Héritée : non
Pourcentage : se rapporte à la largeur du bloc conteneur Médias : visuel
Cette propriété spécifie le décalage du bord gauche du contenu d'une boîte par rapport à celui de la boîte du bloc conteneur.
Les significations des valeurs de ces quatres propriétés sont :
<longueur>
Le décalage est représenté par une distance fixe à partir du bord de référence ;
<pourcentage>
Le décalage est représenté par un pourcentage de la largeur du bloc conteneur (pour les propriétés 'left' et 'right') ou la hauteur de celui−ci (pour les propriétés 'top' et 'bottom'). Si la hauteur du bloc conteneur n'est pas spécifiée explicitement (par exemple celle−ci dépendant de la hauteur du contenu), les propriétés 'top' et 'bottom' sont sensées avoir la valeur 'auto' ;
auto
L'effet de cette valeur dépend des propriétés associées, lesquelles ont aussi cette même valeur 'auto'. Voir les passages traitant de la largeur et de la hauteur des éléments non−remplacés en position absolue.
Pour les boîtes en position absolue, les décalages sont déterminés par rapport à la boîte du bloc conteneur. Pour les boîtes en position relative, ils sont déterminés par rapport aux bords externes de la boîte elle−même (c.à.d., la boîte reçoit un emplacement dans le flux normal, puis elle est décalée de cet emplacement en fonction des valeurs
des propriétés de position).