Modèles des blocs et positionnement en CSS

La syntaxe qui permet de définir une propriété CSS et sa valeur est toujours :

propriété : valeur ;

Il est possible de coupler plusieurs propriétés et leurs valeurs les unes à la suite des autres :

propriété : valeur ; propriété : valeur ;

Modèle

Sert à	Propriété	Valeur	Exemple	NB
Largeur	`width`	Valeur en pixel ou pourcentage	`width : 50px ; width : 50% ;`	Dans les 2 cas la représentation graphique dépendra de la taille de l’écran utilisateur, de sa résolution.
Hauteur	`height`	Valeur en pixel ou pourcentage*	`height : 50px ; height : 50% ; *`	* Il n’est pas possible de définir une hauteur en pourcentage. Excepté si le type de positionnement de l’élément est absolu absolute.
Largeur maximum	`max-width`	Valeur en pixel ou pourcentage	`max-width:20px;`
Hauteur maximum	`max-height`	Valeur en pixel ou pourcentage	`max-height:15px;`
Largeur minimum	`min-width`	Valeur en pixel ou pourcentage	`min-width:10px;`
Hauteur minimum	`min-height`	Valeur en pixel ou pourcentage	`min-height:5px;`
Marges extérieures (toutes)	`margin`	Valeur en pixel ou pourcentage	`margin : 4px ; margin : 20px 15px 10px 5px ;`	Le premier exemple définit 4px pour toutes les marges extérieures. Le second définit les marges extérieures dans le sens des aiguilles d’une montre : haut, droite, bas, gauche.
Marge extérieure (unilatérale)	`margin-top` `margin-right` `margin-bottom` `margin-left`	Valeur en pixel ou pourcentage	`margin-left : 10px ;`	Il est possible de combiner plusieurs propriétés CSS de marges extérieures unilatérales. Une valeur de marge extérieure peut être négative.
Marges intérieures (toutes)	`padding`	Valeur en pixel ou pourcentage	`padding : 25px ; padding : 20px 15px 10px 5px ;`	Le premier exemple définit 25px pour toutes les marges intérieures. Le second définit les marges intérieures dans le sens des aiguilles d’une montre : haut, droite, bas, gauche. Une valeur de marge intérieure ne peut être négative.
Marge intérieure (unilatérale)	`padding-top` `padding-right` `padding-bottom` `padding-left`	Valeur en pixel ou pourcentage	`padding-left : 15px ;`	Il est possible de combiner plusieurs propriétés CSS de marges intérieures unilatérales.
Bordures (toutes)	`border`	épaisseur / style / couleur	`border : 1px solid black border : 2px dashed #ffcc00`	Applique une bordure aux 4 côtés. Le 2ème paramètre provient d’une liste fournie de styles de bordures. (+ d’infos…)
Bordures (unilatérales)	`border-top` `border-right` `border-bottom` `border-left`	épaisseur / style / couleur	`/* ex. propriété unilatérale */`	Applique une bordure unilatérale. Il est possible de combiner plusieurs propriétés CSS de bordures unilatérales.

Déterminer le type de positionnement

Sert à	Propriété	Valeur	Exemple	NB
Détermine le type de positionnement d’un élément	`position`	`static` / `fixed` / `absolute` / `relative`	`position : absolute;`	Un élément, quel qu’il soit, est par défaut positionné en `static`. Nous n’aurons donc que très rarement cette valeur.

Positionnement statique

Sert à Propriété Valeur Exemple NB

Coller des éléments à la suite / pousser à gauche ou à droite

Sert à	Propriété	Valeur	Exemple	NB
Coller des éléments à la suite / pousser à gauche ou à droite	`float`	`left` / `right` / `none`	`float : left;`	Les 2 éléments collés doivent avoir une propriété `float` pour être collés. Les éléments qui suivent une propriété `float` doivent systématiquement bénéficier d’une propriété CSS `clear` pour pouvoir être positionnés après les éléments en `float`.
Coller des éléments à la suite / mettre en ligne	`display`	`flex`	`display : flex;`	Cf : apprendre le positionnement flex
Centrer un block / une boite	`margin`	`auto`	`margin-left:auto;margin-right:auto; margin:auto ; margin:10px auto 10px auto; margin:10px auto;`	La propriété pour centrer un élément et rajouter des marges extérieures est la même. Attribuer la valeur `auto` à droite et à gauche d’un élément permet de le centrer. Les 2 derniers exemples centrent l’élément et attribuent une marge haute et basse de 10px.

float

left / right / none

float : left;

Les 2 éléments collés doivent avoir une propriété float pour être collés. Les éléments qui suivent une propriété float doivent systématiquement bénéficier d’une propriété CSS clear pour pouvoir être positionnés après les éléments en float.

Coller des éléments à la suite / mettre en ligne

display

flex

display : flex;

Cf : apprendre le positionnement flex

Centrer un block / une boite

margin

auto

margin-left:auto;margin-right:auto;
margin:auto ;
margin:10px auto 10px auto;
margin:10px auto;

La propriété pour centrer un élément et rajouter des marges extérieures est la même. Attribuer la valeur auto à droite et à gauche d’un élément permet de le centrer.

Les 2 derniers exemples centrent l’élément et attribuent une marge haute et basse de 10px.

NB : float et display:inline-block permettent d’arriver au même résultat mais présentent des contraintes d’utilisation. Il convient donc d’opter pour la méthode la plus appropriée.

Positionnement fixe / absolu / relatif

Sert à	Propriété	Valeur	Exemple	NB
Positionné depuis le haut	`top`	Valeur en pixel ou pourcentage	`top : 150px ; top : 50% ;`	Le type de positionnement doit être défini comme fixe, absolu ou relatif au préalable.
Positionné depuis la droite	`right`	Valeur en pixel ou pourcentage	`right : 100px ; right : 25% ;`	Le type de positionnement doit être défini comme fixe, absolu ou relatif au préalable.
Positionné depuis le bas	`bottom`	Valeur en pixel ou pourcentage	`bottom : 200px ; bottom : 75% ;`	Le type de positionnement doit être défini comme fixe, absolu ou relatif au préalable.
Positionné depuis la gauche	`left`	Valeur en pixel ou pourcentage	`left : 350px ; left : 80% ;`	Le type de positionnement doit être défini comme fixe, absolu ou relatif au préalable.
Ordre des calques	`z-index`	valeur numérique	`z-index : 5;`	Détermine l’ordre d’affichage des éléments positionnés en absolu, fixe ou statique. Ainsi, un élément ayant `z-index : 2` passera devant un élément en `z-index : 1`.