CSS — QCM

1Deux règles visent le même élément et se contredisent. Laquelle s'applique ?

La spécificité passe avant l'ordre : #id > .classe > balise. L'ordre ne tranche qu'à spécificité égale. C'est pour cela qu'une règle ajoutée en bas de feuille peut rester sans effet : elle est moins spécifique que celle qu'elle voulait corriger.

2Le modèle de boîte, de l'intérieur vers l'extérieur :

contenu → padding → border → margin. Le padding écarte le contenu du trait, la border est le trait, la margin écarte la boîte de ses voisines. Retenez que le padding est dedans (il colorie avec le fond) et la marge dehors (elle reste transparente).

3À quoi sert * { box-sizing: border-box; } ?

Par défaut, width: 200px désigne le contenu seul : ajoutez 20 px de padding et la boîte occupe 240 px. Avec border-box, les 200 px incluent padding et bordure — la largeur annoncée devient la largeur réelle, et les calculs de grille cessent de déborder.

4Que sélectionne « nav > a » ?

> ne descend que d'un cran : un lien enfermé dans un <li> à l'intérieur du <nav> n'est pas visé. Pour tous les descendants, on écrit l'espace seul : nav a.

5::before ne produit rien à l'écran. Que manque-t-il ?

::before et ::after créent un contenu qui n'existe pas dans le HTML : sans content, il n'y a rien à afficher, même pas une boîte vide. content: "" suffit quand on ne veut qu'un carré décoré.

6Quel bloc centre un élément à la fois horizontalement et verticalement ?

Sur un conteneur flex en row, justify-content agit sur l'axe principal (horizontal) et align-items sur l'axe transversal (vertical). Il faut encore que le conteneur ait une hauteur — d'où le min-height: 100vh du cours.

7En mobile-first, quelle forme prend la media query ?

Mobile-first : la base du fichier décrit le téléphone, puis on ajoute pour les écrans plus larges avec min-width. max-width serait la démarche inverse — on partirait du bureau pour retirer. Les deux marchent, mais on ne les mélange pas dans une même feuille.

8Quelle est la différence entre <div> et <span> ?

Un <div> prend toute la largeur et provoque un retour à la ligne ; un <span> s'insère au milieu d'une phrase sans la couper. Les deux sont des conteneurs neutres, sans aucun sens propre : ils ne servent qu'à regrouper pour styliser.

9Quelle est la valeur par défaut de flex-shrink ?

flex-shrink: 1 par défaut : dans un conteneur trop étroit, les items se compriment d'eux-mêmes. C'est l'inverse de flex-grow, à 0 par défaut : personne ne grandit tant qu'on ne l'a pas demandé. D'où l'image fréquente : ça rétrécit tout seul, ça ne grandit jamais tout seul.

10Un deux-points ou deux ? :hover et ::first-letter

Une pseudo-classe (:) décrit un état ou une position de l'élément — survolé, coché, premier enfant. Un pseudo-élément (::) désigne un morceau — la première lettre, la première ligne, ou du contenu inventé avant et après.