Table des matières Modèle de boîte

 

Les trois concepts CSS les plus importants pour la mise en page sont :

  1. le modèle de boîte
  2. le positionnement
  3. le flottement,

Ils déterminent la disposition des éléments de la page et forment la base des mises en page CSS. Il faut un peu de temps pour bien comprendre les tenants et les aboutissants du modèle de boîte

Une fois que vous aurez intégrer le modèle en pelures d'oignon, il restera à comprendre :

Comment et pourquoi les marges s'effondrent ?

 

Entrons dans le vif du Sujet

ne s'hérite pas CSS1 iemzchromeoperasafari
I Un modèle pelures d'oignon en 4 couches

Syntaxe CSS
5 propriétés CSS décrivent la boîte :
la hauteur de la boîte :
height
la largeur de la boîte :
width
la bordure de la boîte :
border-size
la marge intérieure (zone entre le contenu et la bordure) :
padding
la marge extérieure (zone entre la bordure et un conteneur adjacent) :
margin

La boîte a donc 4 couches :

Exemple

#myBox {
   margin: 30px;
   padding: 25px;
   width: 120px;
   heigth: 100px;
   border : 2px black solid;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

II L'effondrement des marges


L'effondrement des marges est un peu déroutant lors de la mise en page

Règle CSS

Deux boîtes placées l'une au dessus de l'autre dans le flux normal voient leurs marges en contact fusionner.

Deux boîtes placées l'une à coté de l'autre voient leurs marges latérales s'ajouter.

Exemple
Règle CSS

Lorsqu'un élément est contenu dans un autre élément et qu'il n'existe pas de remplissage
ou de bordure séparant les marges, les marges du haut ou du bas sont fusionnées également

Exemple
Règle du W3C

Voici la norme, telle qu'elle est énoncée par le W3C en CSS2 (http://www.yoyodesign.org/doc/w3c/css2/box.html):

les marges horizontales ne fusionnent jamais.

Les marges verticales peuvent fusionner entre certaines boîtes :

  • Les marges verticales de deux boîtes, ou plus, d'éléments de type bloc, placés dans un flux normal fusionnent. La largeur de la marge finale devient la valeur la plus grande entre celles des marges adjacentes. Dans le cas de marges négatives, on soustrait la plus grande des valeurs des marges négatives adjacentes, en valeur absolue, de la plus grande des marges positives adjacentes. Et s'il n'y pas de marges positives, on déduit de zéro la plus grande des marges négatives, en valeur absolue. Remarque Les boîtes limitrophes peuvent être générées par des éléments qui n'ont aucune parenté en tant que frères ou ancêtres ;
  • Les marges verticales entre une boîte qui flotte et toute autre boîte ne fusionnent pas ;
  • Les marges entre des boîtes absolument et relativement positionnées ne fusionnent pas.

Ces règles ont des conséquences amusantes : si une boîte est vide (ni bordure ni remplissage) mais possède une marge mais , la marge supérieure touche la marge du bas et les deux fusionnent (voir Figure 3.6).

Exemple


donne
donne
titre rouge

En conséquences une suite de paragraphe vides ne prennent que très peu d'espace, car toutes les marges s'effondrent et fusionnent pour n'en former plus qu'une.

La fusion des marges se justifie totalement quand la page présente une succession de paragraphe : il est naturel que de prendre cette interprétation plutôt qu'additionner les marges.

III Modèle de boîte Microsoft (ou "quirks")

Les versions 5.0 et 5.5 d'Internet Explorer interprétaient selon un autre modèle de boîte :

La largeur (width) n'était pas celle du contenu mais du contenu + padding + border.

Ce mode de calcul où les propriétés visibles (espaces et bords) sont incluses dans le calcul de la boîte est appelé "mode Quirks". C'est un modèle de boîte ancien et spécifique à Microsoft.

A partir de la version 6.0 d'Internet Explorer, l'interprétation des dimensions CSS des boîtes est la même que pour les autres navigateurs, c'est le modèle de boîte dit "Standard". (Malgré tout peut repasser en mode Quirk dans des cas cas particulier comme une page HTML sans DOCTYPE (donc non valide). Il faut donc s'assurer que la page posside un Doctype valide et conforme. )

Le "mode Quirks" est maintenu obtenu par par l'attribut "box-sizing: border-box;" décrit dans la section suivante.


Règle CSS

 

Ressources

s'hérite CSS1 iemzchromeoperasafari
III Bordure et Style de bordure

A toute boîte , on peut définir un style, une épaisseur, une couleur de bordure en voici quelques exemple

La propriété border-style spécifie le type de bordure à afficher.

Exemple

none: pas de bordure

dotted: pointillés

dashed: identique au précédent !!

solid: solide

double: double bordure

groove: Définit une bordure 3D rainurés. L'effet dépend de la valeur border-color

ridge: Définit une bordure 3D striée. L'effet dépend de la valeur border-color

inset: Définit une bordure 3D mettant le ocntu en profondeur. L'effet dépend de la valeur border-color

outset: Définit une bordure 3D mettant le contenu en relief. L'effet dépend de la valeur border-color

Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

1) On souhaite formater un formulaire comme ci-dessous, sans tableau :

Copier le code html donné ici :

Suivre les recommandations pas à pas suivante :

Tous les éléments sont dans des div de largeur 500 avec des marges gauche et droite auto. Leurs contenus seront alignés à droite.

Tous les ".inputText" devront faire une largeur de 300px (sans compter la bordure)

Ils auront aussi une bordure noire de 1px ainsi qu'une marge au-dessus et au-dessous de 3px

Tous les ".inputRadio" devront avoir une largeur de 20px et un complément en marge droite pour obtenir l'alignement

Dans les input #bonheur et #vertu, il faut placer une images de fond sans répétition , grace à un padding gauche de 20px, la saisie pourra débuter après cette image de fond. (Décompter de padding de la largeur de l'input)

Corrigé