Le langage CSS/Le modèle de boîte

Le langage CSS

1. Introduction
   • Premier exemple
   • Structure et syntaxe
   • Les sélecteurs
   • Valeurs et unités utilisées
2. Mise en forme
   • Texte
   • Fonds, bordures, marges et espacements
   • Listes
   • Tableaux
   • Héritage
3. Mise en page
   • Le positionnement des éléments
   • Le modèle de boîte
   • Transformation géométrique
4. Pour aller plus loin
   • Techniques avancées
   • Navigateurs et débogage
   • CSS 3
   • Bootstrap
5. Annexes
   • Glossaire
   • Mots réservés
   • Notions de design et de colorimétrie
   • Interface HTML

Modèle de boîte d'un élément

Chaque élément est modélisable sous forme de boîtes imbriquées.

margin border padding Zone de contenu (texte, image, ...).

margin Espace entre les bordures des éléments. border Bordure autour de l'élément, d'épaisseur variable. padding Espace entre la bordure et le contenu de l'élément.

Chacune de ces propriétés peuvent se décliner dans les 4 directions. Voir le chapitre sur les bordures, marges et espacements pour plus de détails.

Ombrage des boites

La propriété box-shadow existe depuis CSS3. Elle crée un effet d'ombrage qui suit le contour de la boite, avec quatre arguments possibles : abscisse, ordonnée, diffusion, couleur.

CSS3	WebKit	Gecko
box-shadow	-webkit-box-shadow	-moz-box-shadow

Exemples

Cette boite affiche une ombre rectangulaire en bas à droite.

div {
	border: 1px solid;
	box-shadow: 10px 10px 0px black;
	-webkit-box-shadow: 10px 10px 0px black;
	-moz-box-shadow: 10px 10px 0px black;
	padding: 0.5em;
}

Cette boite affiche une ombre arrondie en bas à droite.

div {
	border: 1px solid;
	box-shadow: 10px 10px 0px black;
	-webkit-box-shadow: 10px 10px 0px black;
	-moz-box-shadow: 10px 10px 0px black;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

Cette boite affiche une ombre diffuse en rouge en haut à gauche.

div {
	border: 1px solid;
	box-shadow: -10px -10px 5px red;
	-webkit-box-shadow: -10px -10px 5px red;
	-moz-box-shadow: -10px -10px 5px red;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

Cette boite affiche une ombre diffuse en rouge, vert et bleu, en bas à droite.

div {
	border: 1px solid;
	box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	-webkit-box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	-moz-box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

Taille des boites

La propriété box-sizing est apparue en CSS3 pour simplifier les couches.

W3C	WebKit	Gecko
box-sizing	-webkit-box-sizing	-moz-box-sizing

Elle prend un seul argument, parmi les valeurs suivantes :

• content-box

  boites intérieures normales.

• border-box

  boites intérieures autour de la bordure.

• inherit

  comportement hérité du parent.

Exemple

div.bigbox {
	width: 40em;
	border: 1em solid red;
	min-height: 5em;
}

div.littlebox {
	width: 50%;
	border: 1em solid;
	box-sizing: border-box; /* cela définit les boites contre la bordure du conteneur */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	float: left;
}

<div class="bigbox">
	<div class="littlebox" style="border-color: green;">Boite de gauche.</div>
	<div class="littlebox" style="border-color: blue;">Boite de droite.</div>
</div>

Rendu :

Boite de gauche.

Boite de droite.

Les deux boites sont côte-à-côte au-dessus du texte.