Vibulary
Menu
Apparence et langue
Termes par sujet · 51 guides

Mise en page & CSS

Découvrez comment le contenu obtient sa taille, son emplacement, son espacement, ses couches et sa forme sur chaque écran.

01 / Atlas

Tous les termes Mise en page & CSS

Ouvrir un terme pour une signification simple, un exemple, quand l'utiliser, son caractère officiel, et son nom de code.

  1. 01 · Plus de détails

    Accrochage de défilement Scroll Snap

    CSS Scroll Snap permet à une zone de défilement de s'arrêter à des points d'alignement choisis après que les utilisateurs ont fait défiler.

  2. 02 · Plus de détails

    Bloc contenant Containing Block

    Un bloc contenant est le rectangle qu'un élément utilise pour déterminer sa position et sa taille en pourcentage.

  3. 03 · Noyau

    Cascade CSS CSS Cascade

    La cascade CSS est l’ensemble des règles qu’un navigateur utilise lorsqu’un même élément est ciblé par plusieurs styles. Elle vérifie la provenance de chaque règle, son importance, le contexte, la couche, le poids du sélecteur, la portée et l’ordre.

  4. 04 · Noyau

    clamp() clamp()

    `clamp()` choisit une valeur CSS préférée mais la garde entre un minimum et un maximum.

  6. 06 · Plus de détails

    comportement de surdéfilement overscroll-behavior

    `overscroll-behavior` contrôle ce qui se passe lorsqu'une zone défilante atteint son bord. Il peut empêcher le défilement de continuer dans une zone parente et peut modifier l'effet de bord.

  7. 07 · Plus de détails

    contenu max max-content

    `max-content` est la taille que le contenu aimerait avoir s’il ne se renvoyait pas à la ligne aux points de rupture normaux.

  8. 08 · Plus de détails

    contenu minimum min-content

    `min-content` est la plus petite taille que le contenu peut utiliser après s’être renvoyé à la ligne à chaque point de rupture autorisé.

  9. 09 · Plus de détails

    Contexte d’empilement Stacking Context

    Un contexte de superposition est un groupe local de couches CSS. Les éléments sont d’abord ordonnés à l’intérieur du groupe, puis l’ensemble du groupe est placé parmi d’autres groupes.

  10. 10 · Plus de détails

    Contexte de formatage de bloc Block Formatting Context

    Un contexte de formatage de bloc, ou BFC, est une zone séparée pour la mise en page des blocs. Il maintient les flottants à l'intérieur et empêche certains marges et flottants d'affecter le contenu à l'extérieur.

  12. 12 · Noyau

    Coquille de l'application App Shell

    Une coquille d'application est le petit cadre qui reste tandis que le contenu de la page change. Il contient généralement la navigation, l'identité et l'état.

  13. 13 · Plus de détails

    Couches en cascade Cascade Layers

    Les couches en cascade sont des groupes nommés qui définissent l'ordre des règles CSS. Le navigateur vérifie cet ordre avant de comparer la spécificité des sélecteurs.

  14. 14 · Noyau

    Débordement Overflow

    Le débordement se produit lorsque le contenu est plus grand que sa boîte. CSS peut l'afficher, le découper ou permettre aux utilisateurs de le faire défiler.

  15. 15 · Plus de détails

    dimensionnement intrinsèque Intrinsic Sizing

    Le dimensionnement intrinsèque permet au contenu d'un élément d'aider à déterminer sa taille au lieu d'utiliser uniquement une taille fixe définie de l'extérieur.

  17. 17 · Noyau

    Espace Gap

    L'espace est la distance qu'un conteneur place entre ses enfants Flexbox ou Grid. La même règle s'applique à chaque paire.

  18. 18 · Noyau

    Espacement Spacing

    L'espacement est un espace vide placé intentionnellement. Il regroupe les éléments connexes, sépare les idées et donne un rythme à la page.

  19. 19 · Noyau

    Flexbox Flexbox

    Flexbox est un système de mise en page CSS pour une direction à la fois. Il aligne et répartit les éléments sur une ligne ou une colonne.

  20. 20 · Plus de détails

    Flou de l'arrière-plan Backdrop Blur

    Le flou d’arrière-plan adoucit ce qui se trouve derrière une surface claire. Il ne floute pas le contenu de la surface elle-même.

  22. 22 · Plus de détails

    Grille Bento Bento Grid

    Une grille bento range des blocs de différentes tailles dans un seul ensemble. Les plus grands blocs montrent ce qui compte le plus.

  23. 23 · Noyau

    Grille CSS CSS Grid

    La grille CSS est un système de mise en page pour les lignes et les colonnes ensemble. Elle peut définir des zones fixes ou les modifier en fonction de l'espace disponible.

  24. 24 · Noyau

    Grille de cartes Card Grid

    Une grille de cartes répète des cartes que l'on peut comparer. Le nombre de colonnes change selon l'espace disponible.

  25. 25 · Noyau

    Héritage CSS CSS Inheritance

    L'héritage CSS permet à certaines propriétés de copier une valeur d'un élément parent. Cela se produit lorsque l'enfant n'a pas de valeur propre.

  26. 26 · Plus de détails

    Imbrication CSS CSS Nesting

    L'imbrication CSS est une syntaxe intégrée pour écrire une règle de style à l'intérieur d'une autre. Le navigateur suit toujours les règles CSS pour lire les sélecteurs et leur poids.

  27. 27 · Noyau

    indice z z-index

    l'indice z est une propriété CSS qui définit le niveau avant-arrière d'une boîte positionnée. Dans certains cas, il crée également un nouveau contexte de superposition local.

  28. 28 · Noyau

    Marge Margin

    La marge est l'espace à l'extérieur de la bordure d'un élément. Elle maintient cet élément à l'écart des éléments de mise en page à proximité.

  29. 29 · Noyau

    minmax() minmax()

    `minmax()` est une fonction CSS Grid qui donne à une ligne ou une colonne une taille minimale et maximale.

  31. 31 · Plus de détails

    Mise en page en maçonnerie Masonry Layout

    Une disposition en masonry empile des éléments de hauteurs différentes dans des colonnes. Les éléments remplissent les espaces vides de haut en bas sans partager les mêmes lignes.

  32. 32 · Noyau

    Modèle de boîte Box Model

    Le modèle de boîte CSS explique la taille d'un élément. Chaque boîte a un contenu, un padding, une bordure et une marge.

  33. 33 · Noyau

    object-fit object-fit

    `object-fit` contrôle comment une image, une vidéo ou un élément similaire s'adapte à sa boîte.

  34. 34 · Noyau

    Opacité Opacity

    L'opacité indique à quel point un élément et ses enfants semblent solides. Elle peut aller de transparent à solide.

  37. 37 · Noyau

    position corrigée Fixed Position

    Le positionnement fixe CSS place une boîte par rapport à un conteneur fixe, généralement la fenêtre du navigateur. La boîte reste normalement en place pendant le défilement du document.

  38. 38 · Noyau

    Position fixe Sticky Position

    Le positionnement sticky CSS commence comme un positionnement relatif normal. Lorsque la page défile, la boîte peut rester à un bord défini, mais uniquement à l'intérieur de son bloc contenant.

  39. 39 · Noyau

    Positionnement CSS CSS Positioning

    Le positionnement CSS indique par rapport à quoi un élément est placé. Il peut utiliser le flux normal, lui-même, un ancêtre ou la fenêtre comme référence.

  42. 42 · Noyau

    Propriétés logiques CSS CSS Logical Properties

    Les propriétés logiques CSS décrivent les côtés selon le flux d'écriture, comme bloc et en ligne. Elles remplacent les directions fixes comme haut, droite, bas et gauche. Cela aide les mises en page à suivre la direction d'écriture de la langue.

  43. 43 · Noyau

    Pseudo-classe Pseudo-class

    Une pseudo-classe fait partie d'un sélecteur CSS. Elle trouve un élément selon une condition, comme l'état, le lieu, la langue ou l'action de l'utilisateur.

  44. 44 · Noyau

    Pseudo-élément Pseudo-element

    Un pseudo-élément permet au CSS de styliser une partie ou une boîte sans élément normal dans le HTML source. Des exemples incluent la première lettre et la décoration générée.

  45. 45 · Noyau

    Rembourrage Padding

    Le rembourrage est l'espace à l'intérieur de la bordure d'un élément, entre son contenu et son bord.

  46. 46 · Plus de détails

    Requête de conteneur Container Query

    Une container query permet au CSS d'adapter un composant à son propre conteneur. Elle vérifie la taille ou le style de ce conteneur au lieu de seulement la fenêtre d'affichage.

  47. 47 · Noyau

    Sélecteur CSS CSS Selector

    Un sélecteur CSS est un motif qui trouve les éléments sur une page afin que des styles puissent leur être appliqués.

  48. 48 · Plus de détails

    Sous-grille Subgrid

    Une sous-grille est une grille à l’intérieur d’une autre grille qui partage les tailles de lignes ou de colonnes de son parent. Elle peut partager une direction ou les deux.

  49. 49 · Noyau

    Spécificité CSS CSS Specificity

    La spécificité CSS est le poids d'un sélecteur. Lorsque d'autres règles de cascade s'égalisent, le navigateur utilise ce poids pour choisir quel style l'emporte.

  50. 50 · Noyau

    Troncature de texte Text Truncation

    La troncature de texte coupe le texte pour gagner de l'espace. Des points de suspension montrent qu'une ou plusieurs lignes manquent.

  51. 51 · Noyau

    Unités de la fenêtre d'affichage Viewport Units

    Les unités de la fenêtre d'affichage sont des longueurs CSS basées sur la zone visible du navigateur. Les versions petite, grande et dynamique gèrent les barres du navigateur qui apparaissent ou disparaissent.