Position position ▾
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' n'ont pas d'effet ;
- relative L'emplacement de la boîte est est déplacé relativement à cette position dans le flux normal.
- absolute L'emplacement de la boîte (et éventuellement sa taille) est déterminé par les propriétés 'left', 'right', 'top', et 'bottom'. 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é.
- fixed L'emplacement de la boîte est calculé comme pour 'absolute', mais la boîte ne bouge pas lors d'un défilement).
Positions 'left', 'top', 'right' et 'bottom'
Les valeurs sont des longueurs donnant le positionnement de la boîte.
z-index
Niveau d'empilement d'une boîte positionnée :
nombre entier : la boîte de niveau n est placée devant la boîte de niveau (n-1) ;
auto : la boîte a le même empilement que son parent.
boîte en z-index=3
|
box-sizing box-sizing ▾
La propriété box-sizing permet de déterminer comment les propriétés width et height sont interprétées.
- content-box (ou "défaut") : valeur par défaut spécifiée dans le standard CSS. Les propriétés width et height sont mesurées en incluant le contenu, sans la bordure, mi les marges extérieure ou intérieure.
- padding-box : les propriétés width et height incluent la marge intérieure, sans la bordure et la marge extérieure.
- border-box : les propriétés width et height incluent la marge intérieure et la bordure, mais pas la marge extérieure.
- inherit : hérite la valeur de l'élément parent.
Dimensions
Les valeurs sont des longueurs : hauteur et largeur de boîte, dimensions mini et maxi.
Saisie des valeurs de position et dimension :
- Chaque valeur est une longueur ou un pourcentage. Si vous entrez un nombre (entier ou avec virgule), l'unité de longueur par défaut est px.
- Les unités possibles sont : px = nombre de pixels (unité par défaut), % = pourcentage, cm = centimètre, mm = millimètre, pt = point, em = valeur de font-size, ex = valeur de x-height, in = inch, pc = pica.
- Une case vide signifie «pas de valeur», une case contenant «0» veut dire propriété à zéro.
|
opacity
Opacité alpha du sélecteur : la transparence affecte à la fois la couleur de fond et la couleur de premier plan.
Peu utilisée maintenant : les couleurs RGBA permettent une transparence qui peut être différente pour le fond et le premier plan.
overflow ▾ (débordement)
Cette propriété spécifie comment est géré le débordement d'un élément dont la taille excède celle de la boîte de texte. Les valeurs possibles sont :
- visible : L'élément peut déborder hors de la boîte ;
- hidden : le contenu est tronqué à la taille de la boîte ;
- scroll (et auto) : la boîte garde la même taille mais est munie d'une barre de défilement permettant de visualiser tout le contenu.
N.B. : Très intéressant pour créer un bloc défilant à l'instar d'un <iframe>, mais en CSS2.
display display ▾
Les valeurs de cette propriété ont le sens suivant (W3C dixit : pourquoi des choses aussi compliquées ?) :
- block génère une boîte de bloc principale ;
- inline génère une ou plusieurs boîtes en-ligne ;
- list-item génère une boîte de bloc principale et une boîte en-ligne pour un item de liste ;
- marker le contenu généré est un marqueur ;
- none aucune boîte n'est générée (invisible par conséquent) ;
- run-in et compact crée une boîte de bloc ou en-ligne ;
- table donne à un élément le comportement d'une table.
Effacer
Cliquez le bouton Effacer ❌ pour effacer les réglages présents.
|
visibility visibility ▾
Les valeurs de cette propriété ont le sens suivant :- visible boîte visible ;
- hidden boîte cachée mais occupant toujours le même espace (à combiner avec un "display:none" pour éviter cela).
float float ▾
Cette propriété spécifie le flottement d'une boîte à gauche, à droite ou pas du tout.
Dans le fonctionnement de base, chaque nouveau bloc se positionne en dessous du bloc précédent. Lorsqu'un élément est déclaré flottant, les suivants peuvent se placer à coté de lui, s'il reste suffisamment de place. Cette disposition est souvent nommée "habillage".
clear clear ▾
Cette propriété est complémentaire de la propriété float. La propriété clear empêche un élément de venir se mettre à côté d'un élément flottant.
clip
Rectangle formant la partie visible de la boîte : ce qui est à l'extérieur est caché.
La propriété s'applique aux éléments dont la propriété overflow est autre que visible.
|
