Le display
On peut aussi changer la façon dont un élément doit se comporter à l'affichage avec display, il y a beaucoup de valeurs possibles ici aussi, mais on ne va voir que les principales, certaines sont des sujets à part entière.
Les valeurs flex et grid ne seront pas abordées en détail ici, mais dans d'autres tutos.
Display block et inline
Pour commencer tu te rappelles de la différence entre <div> et <span>?
Si je me souviens bien, <div> s'affiche en bloc, alors que <span> s'affiche en ligne.Exactement, et bien par défaut, un <div> a un display: block, alors qu'un <span> a un display: inline. Mais on peut très bien les inverser si on le souhaite :
Ah oui, ça inverse vraiment l'affichage.Display inline-block
On peut aussi utiliser la valeur inline-block pour un élément, ça fait un peu un mix des deux, l'élément sera affiché comme un inline, mais on pourra modifier sa hauteur et largeur avec width et height comme un block.
Ok, ça peut être pratique !Display none
Il y a une autre valeur très pratique, le none, dans ce cas l'élément n'apparaitra pas à l'écran.
Mais, pourquoi on voudrais créer un élément HTML pour au final ne pas le faire apparaitre à l'utilisateur?Actuellement pas à grand chose, mais quand tu feras du javascript, tu verras que ça peut être très pratique pour masquer des éléments, et les afficher lorsque l'utilisateur clique sur un bouton ou fait une action particulière.
Je te fais confiance.Visibility hidden
Il y a un autre moyen de cacher un élément, avec la propriété visibility à hidden, mais le rendu est très différent, car display: none, n'affiche pas du tout l'élément dans la page, alors que visibility: hidden le masque mais conserve l'espace pour l'afficher :
Effectivement, je vois la différence.D'autres display
Il existe d'autres valeurs possibles à display, comme list-item qui est appliquée par défaut à toutes les balises <li> qui sont dans une liste, ou encore table-row pour les colonnes et table-cell pour les cases d'un tableau. Mais on ne les utilise que très peu en css, ce sont des valeurs par défaut pour des cas particuliers.
Il y a aussi le flex et le grid, qui permettent de préparer un affichage qui va s'adapter selon la taille de l'écran, mais nous les verrons en détail une autre fois.
D'accord J'ai terminé cette partie