Les boîtes

Box-sizing.

La propriété 'box-sizing' permet de définir comment la taille ('width' et 'height') d'un élément sera calculée. La valeur par défaut qui est 'content-box' calcul la taille de l'élément et lui ajoute les valeurs que peuvent avoir 'border' et 'padding'. Si je définis une boite ayant pour valeur 50px qui à une 'border' à 10px et un 'padding' à 5px, 'content-box' calculera donc la taille de l'élément à 65px. Par contre si j'utilise la valeur 'border-box', le contenu sera adapté pour que la valeur totale de l'élément reste à 50px. De plus, lors de l'utilisation de la propriété 'position' avec pour valeur 'absolute' ou bien 'relative', 'content-box' permet aux valeurs de positionnement d'être relatives au contenu et indépendante des changements de taille des bordures et des marges internes.

box-sizing: content-box | border-box
									

Element parent

Element enfant

Code:

.exemple {
 width: 70% ; 
 margin: 0 auto;
}

.exemple01-a {
box-sizing: content-box;
width: 100%;
border: solid #55A0FF 5px;
padding: 5px;
}

.exemple01-b {
box-sizing: content-box;
width: 100%;
border: solid #D16DBA 5px;
padding: 5px;
}
									

Même code mais avec 'border-box'.

Element parent

Element enfant

Voir si cela peut résoudre les problèmes de boîtes avec le retour à la ligne de 'flex-basis' !


Aspect-ratio.

Attention ! Ne fonctionne actuellement qu'avec Chrome et partiellement avec Firefox v.83.

La propriété 'aspect-ratio' définit un rapport 'width' et 'height' pour une boîte qui sera par la suite utilisé dans le calcul de la taille de l'élément. Cette prpriété peut s'appliquer à tous les éléments sauf aux boîte en ligne 'inline' et les 'table'. La valeur par défaut est 'auto'. Avec pour valeur 'auto', Les éléments remplacés avec un rapport hauteur-largeur intrinsèque utilisent ce rapport hauteur-largeur, sinon la boîte n'a pas de rapport hauteur-largeur préféré. Les calculs de taille impliquant un rapport hauteur-largeur intrinsèque fonctionnent toujours avec les dimensions de la zone de contenu.

Avec une valeur de ratio, le rapport hauteur-largeur préféré de la boîte est le rapport largeur-hauteur spécifié. Les calculs de taille impliquant les proportions préférées fonctionnent avec les dimensions de la boîte spécifiées par le dimensionnement de la boîte.

aspect-ratio: auto | valeur

aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;							
									

Les navigateurs ont ajouté une propriété de rapport hauteur-largeur interne qui s'applique aux éléments remplacés et à d'autres éléments associés qui acceptent les attributs de largeur et de hauteur. Cela apparaît dans la feuille de style UA interne du navigateur.

Pour Firefox v.83, cette fonctionnalité est derrière les préférences de mise en page.css.aspect-ratio.enabled (doit être définie sur true). Pour modifier les préférences dans Firefox: 'about: config'. La CSS de Firefox pour cet attribut:

img, input[type="image"], video, embed, iframe, marquee, object, table {
  aspect-ratio: attr(width) / attr(height);
}							
									

A ce sujet, définir la taille des images ou leur ratio améliore grandement la rapidité de chargement de la page ainsi qu'une meilleur prise en charge de la mise en page. L'article de Barry Pollard est dispo dans les documents et sources en bas de page.


Min-width et max-width.

La propriété 'min-width' donne la valeur minimum que peut prendre 'width' et 'max-width' donne la valeur maximum que peut prendre 'width'. 'min-width' peut prendre pour valeur des longueurs, des pourcentages ou bien des mots clés. Les longeurs ne peuvent en aucun cas être négatives. Idem pour 'max-width'. S'applique à tous les éléments, sauf les éléments en ligne non remplacés, les lignes de tableaux et les groupes de lignes.

min-width: 1em;
min-width: 10%;

min-width: max-content;	/* largeur intrinsèque préférée */
min-width: min-content;	/* largeur intrinsèque minimale */

min-width: fit-content;	
/* La largeur calculée par min(max-content, max(min-content, fill-available)). */

min-width: fill-available; 
/* La largeur du bloc englobant moins la marge horizontale, 
la bordure et le remplissage (padding). */


max-width: 3em;
max-width: 100%;

max-width: none; /* pas de maximimum, valeur par défaut */
max-width: max-content; /* largeur intrinsèque préférée */
max-width: min-content; /* largeur intrinsèque minimale */
max-width: fit-content; /* Un synonyme pour max-content */

max-width: fill-available;		
/* La largeur du bloc englobant moins la marge horizontale, 
la bordure et le remplissage (padding) */					
									

Min-height et max-height.

La propriété 'min-height' donne la valeur minimum que peut prendre 'height' et 'max-height' la valeur maximum. S'applique à tous les éléments, sauf les éléments en ligne non remplacés, les lignes de tableaux et les groupes de lignes

min-height: 1em;	
min-height: 10%;	

min-height: max-content; /* hauteur intrinsèque préférée */
min-height: min-content; /* hauteur intrinsèque minimale */
min-height: fit-content; /* synonyme de min-content non implélenté ! */

min-height: fill-available; 
/* La hauteur du bloc englobant moins celle de la marge verticale, 
de la bordure et du remplissage (padding). */

max-height: 2em;
max-height: 50%;

max-height: none; /* pas de limite */
max-height: max-content; /* hauteur intrinsèque préférée */
max-height: min-content; /* hauteur intrinsèque minimale */
max-height: fit-content; /* synonyme pour max-content */

max-height: fill-available; 
/* La hauteur du bloc englobant moins la marge verticale, 
la bordure et le remplissage (padding) */
			
									

Resize.

Cette propriété permet de controler la manière dont un élément peut être redimmensionné. Cette propriété ne s'applique pas aux blocs ayant pour proprité : 'overflow: visible'. Les valeurs acceptées sont:

resize: none | both | horizontal | vertical | block | inline
												

La valeur 'none' n'offre aucune méthode à l'utilisateur pour redimmensionner l'élément.

La valeur 'both' affiche un mécanisme pour redimmensionner l'élément de manière horizontale et verticale.

La valeur 'horizontal' affiche un mécanisme pour redimmensionner l'élément de manière horizontale mais pas vertical.

La valeur 'vertical' affiche un mécanisme pour redimmensionner l'élément de manière vertical mais pas horizontal.

La valeur 'block' affiche un mécanisme pour redimmensionner horizontalement ou verticalement dans la direction du bloc en fonction de 'writing-mode' et 'direction'.

La valeur 'inline' affiche un mécanisme pour redimmensionner horizontalement ou verticalement dans la direction du flux en fonction de 'writing-mode' et 'direction'.

L'élément 'textarea' qui peut être redimensionné par défaut peut changer de comportement avec 'resize' de cette manière:

textarea {
resize: none;
}
												

Il est aussi possible d'assigner la propriété 'resize' à d'autre éléments. Ici pour un paragraphe redimensionnable:

p.redimensionnable {
resize: both;
}
												

Attention! 'resize' n'est pris en charge par les navigateurs qu'au niveau des blocs, des éléments remplacés, des cellules d'un tableau ou bien des blocs en lignes.


Marges et remplissage.

Margin.

Une valeur sera valable pour les quatre cotés. Avec deux valeurs, la première s'applique au haut et au bas, la deuxième à gauche et à droite. Avec trois valeurs, la première s'applique au haut, la deuxième à gauche et à droite, la troisième en bas. Et avec quatres valeurs, elles s'appliquent du haut à gauche dans le sens des aiguilles d'une montre.

margin: 1em; /* quatre cotés*/

margin: 1em 2em; /* haut-bas et droite-gauche */

margin: 1em 2em 1em; /* haut droite-gauche bas */
			
									

Il est possible d'utiliser la valeur 'auto' qui sera remplacée par une valeur adaptée comme dans le centrage de bloc.

/* centrage horizontal */

width: 50%;
margin: 0 auto;

/* ou bien: */

margin: auto; /* pas de marge haute et basse, centrage horizontal */

margin: 2em auto; /* marge haute et basse, centrage horizontal */
			
									

Propriétés individuelles:

margin-top
margin-bottom
margin-right
margin-left		
									

Padding.

Une valeur s'applique aux quatre cotés. Avec deux valeurs, la première s'applique au haut-bas et la deuxième droite-gauche. Avec trois valeurs, la première s'applique au haut, la deuxième à droite-gauche et la troisième à bas. Avec quatre valeurs, elles s'appliquent du haut à gauche dans le sens des aiguilles d'une montre.

padding: 1em; /* quatre cotés*/

padding: 1em 2em; /* haut-bas et droite-gauche */

padding: 1em 2em 1em; /* haut droite-gauche bas */
			
									

Propriétés individuelles:

padding-top
padding-bottom
padding-right
padding-left		
									

Positionnement.

Position.

Permet de définir la position d'un élément dans un document avec les propriétés 'top', 'right', 'left' et 'bottom'. La propriété position peut prendre pour valeur: 'static', 'relative', 'absolute', 'fixed' et 'stycky'.

La valeur par défaut de 'position' est 'static'. L'élément est positionné dans le flux avec sa position et les propriétés 'top', 'right', 'left', 'bottom' et 'z-index' ne s'appliquent pas.

La valeur 'relative' positionne l'élément normalement dans le flux puis le décale selon les valeurs données à 'top', 'right', 'left' et 'bottom'. Le décalage n'a pas d'impact sur la position des éléments et l'espace donné à l'élément sur la page est le même qu'avec static. Cette valeur crée un nouveau contexte d'empilement lorsque z-index ne vaut pas auto.

La valeur 'absolute' retire l'élément du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial. La position finale de l'élément est déterminée par les valeurs de 'top', 'right', 'bottom' et 'left'. Cette valeur crée un nouveau contexte d'empilement lorsque 'z-index' ne vaut pas 'auto'.

la valeur 'fixed' retire l'élément du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (viewport), sauf si un des ancêtres a une propriété 'transform', 'perspective' ou 'filter' qui est différente de none. Dans ce cas, c'est l'élément parent qui joue le rôle de bloc englobant. Cela empêche le défilement de l'élément lorsque la page est parcourue. La valeur finale de l'élément est déterminée par les valeurs 'top', 'right', 'bottom' et 'left'.

la valeur 'sticky' calcule la position de la boîte en fonction du flux normal du document et décale la boîte par rapport à son parent de défilement le plus proche ainsi qua patr rapport au bloc englobant selon les valeurs 'top', 'right', 'bottom' et 'left'. L'élément adhèrera au parent le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand overflow vaut hidden, scroll, auto ou overlay) même si ce parent n'est pas nécessairement le parent de défilement le plus proche. Cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut 'overflow: hidden' ou 'auto'.

Attention cependant aux valeurs 'fixed' et 'sticky' qui peuvent poser des soucis en terme d'accessibilité ! (voir solution avec 'will-change: transform').

position: static | relative | absolute | sticky | fixed	

top: px | em | % | auto

right: px | em | % | auto

left: px | em | % | auto

bottom: px | em | % | auto	
									

Losrque les propriétés 'top' et 'bottom' sont toutes deux définies, 'top' aura la priorité. Et si 'left' et 'right' sont toutes deux définies, c'est 'left' qui aura la priorité (au cas où la direction du texte est de gauche à droite) et 'right' si la direction du texte et de droite à gauche.


Vertical-align.


Articles connexes:

Voir 'box-sizing' et flex-basis ![ GO! ]

Voir 'vertical-align' pour le texte.[ GO! ]


Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 25/12/2020