la base de CSS

boîtes et flux

tous les slides et exercices

formation CSS

https://css.formations.alsacreations.fr/

🎓

Le Modèle de Boîte

Le Modèle de Boîte

Le navigateur dessine les éléments HTML sous forme de "boîtes".

Quatre zones composent chaque boîte : content, padding, border et margin.

Modèle de boîte standard

.box {
  box-sizing: content-box;
}

valeur par défaut

Les valeurs de width et height s'appliquent Ă  la zone de contenu.

Donc la "vraie" largeur de la boite :

width + padding + border

Modèle de boîte moderne

.box {
  box-sizing: border-box;
}

Les valeurs de width et height s'appliquent Ă  la zone de bordure.

Donc la largeur totale de la boite :

width

Modèle de boîte moderne

Ă  mettre dans tout fichier Reset CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

Exercice d'observation

pour se réveiller en douceur !

Types de boîtes

  • Les boĂ®tes de type bloc
  • Les boĂ®tes de type en ligne
  • Le type d'une boĂ®te est dĂ©fini par la valeur de sa propriĂ©tĂ© display
  • Tous les Ă©lĂ©ments HTML sont associĂ©s Ă  une valeur de​ display

Il existe deux types de boîtes :

Boîtes en "bloc"

Flux :

  • Passent Ă  la ligne (s'affichent sous la boĂ®te prĂ©cĂ©dente)

Taille par défaut :

  • Occupent toute la largeur disponible dans leur parent
  • Occupent la hauteur de leur contenu

Exemples (HTML) :

<div>, <p>, <h1>... <h6>, <ul>, <li>, <form>, <header>, <footer>, etc.

Exemples (CSS) :

display: block | flex | grid | table | list-item, etc.

Boîtes "en ligne"

⚠️ Particularité : on ne peut pas appliquer de dimensions (width, height) à un élément en display: inline 

Flux :

  • S'affichent Ă  cĂ´tĂ© de la boĂ®te prĂ©cĂ©dente (si possible)

Taille par défaut :

  • Occupent la largeur de leur contenu
  • Occupent la hauteur de leur contenu

Exemples (HTML) :

<span>, <a>, <strong>, <em>, <img>, <input>, <button>, etc.

Exemples (CSS) :

display: inline | inline-block | inline-flex | inline-grid | inline-table, etc.

QUIZ !

"une question de taille"

a {
  width: 100px; 
  height: 100%; 
  padding: 5px;
}

Largeur 1

la taille de son contenu

l'élément <a> est un élément "inline" donc ni width ni height ne s'appliquent 🤷‍♂️

a {
  width: 100px; 
  height: 100%; 
  padding: 5px;
}

Largeur 1

p {
  width: 100px; 
  padding: 5px;
}

Largeur 2

largeur = 110px

width + padding Ă  droite + padding Ă  gauche

p {
  width: 100px; 
  padding: 5px;
}

Largeur 2

p {
  width: 100px; 
  padding: 5px;
  border: 1px;
  margin: 10px;
}

Largeur 3

largeur = 112px

width + padding à droite + padding à gauche + border à droite + border à gauche (les margin sont à l'extérieur de la boîte)

p {
  width: 100px; 
  padding: 5px;
  border: 1px;
  margin: 10px;
}

Largeur 3

p {
  width: 100px; 
  padding: 10%;
  border: 1em;
}

Largeur 4

largeur = bah euh... 🤷‍♂️

difficile de calculer avec des unités différentes

p {
  width: 100px; 
  padding: 10%;
  border: 1em;
}

Largeur 4

p {
  width: 100px; 
  padding: 10%;
  border: 1em;
  box-sizing: border-box;
}

Largeur 5

largeur = 100px

avec border-box, la largeur de la boîte correspond simplement à la valeur de width

Largeur 5

p {
  width: 100px; 
  padding: 10%;
  border: 1em;
  box-sizing: border-box;
}

et positionnement

Flux

Le Flux

<div class="parent">
  <h1>Je suis le titre</h1>
  <p>Je suis un paragraphe</p>
</div>

.parent

Je suis le titre

Je suis un paragraphe

h1 {background: pink;}
p {background: chocolate;}

Je me place le plus haut possible à gauche dans mon parent, à la suite de l'élément précédent (et en plus je prends toute la largeur car je suis de type Bloc)

Le Flux

<div class="parent">
  <h1>Je suis le titre</h1>
  <p>Je suis un <span>paragraphe</span></p>
</div>

.parent

Je suis le titre

h1 {background: pink;}
p {background: chocolate;}
span {background: lightgreen;}

Je suis de type Inline donc ma taille est celle de mon contenu et je m'affiche à côté des éléments précédents

Je suis un paragraphe

Le Flux

<div class="parent">
  <h1>Je suis le titre</h1>
  <p>Je suis un <span>paragraphe</span>
    <strong>important</strong>
  </p>
</div>

.parent

Je suis le titre

h1 {background: pink;}
p {background: chocolate;}
span {background: lightgreen;}
strong {background: yellow;}

Je suis de type Inline donc ma taille est celle de mon contenu et je m'affiche à côté des éléments précédents

Je suis un paragraphe important

Le Flux

Le Flux d'un document décrit le comportement naturel d'affichage des éléments
(selon l'ordre d'apparition dans le HTML)

Spécificités du Flux

  • C'est le placement par dĂ©faut
  • L'affichage d'un Ă©lĂ©ment dĂ©pend de sa valeur de display
  • Les Ă©lĂ©ments de type Bloc s'affichent naturellement les uns sous les autres
  • Les Ă©lĂ©ments de type En ligne s'affichent cĂ´te Ă  cĂ´te
  • Les Ă©lĂ©ments interagissent entre eux (se poussent, s'agrandissent, etc.) car ils sont sur le mĂŞme plan

Sortir du Flux

<div class="parent">
  <div class="salade">salade</div>
  <div class="tomate">tomate</div>
  <div class="oignons">oignons frits et…</div>
  <div class="choucroute">choucroute</div>
</div>

.parent

salade

tomate

oignons frits et 

petits lardons

choucroute

...

.parent

salade

tomate

oignons frits et 

petits lardons

choucroute

Pour le moment, tous les éléments sont placés naturellement dans le Flux les uns sous les autres puisque ce sont des <div> (donc de type Bloc)

Sortir du Flux

.tomate {
  position: absolute;
}

.parent

salade

tomate

oignons frits et 

petits lardons

choucroute

L'élément .tomate passe en position absolute

exemple : positionnement absolu

Sortir du Flux

.tomate {
  position: absolute;
  top: 0;
}

.parent

salade

tomate

oignons frits et 

petits lardons

choucroute

L'élément .tomate passe en position absolute, 

placé en coordonnée top: 0

exemple : positionnement absolu

Sortir du Flux

.parent {
  position: relative; 
/* je suis référent de tomate */
}
.tomate {
  position: absolute;
  top: 0;
}

.parent

salade

tomate

oignons frits et 

petits lardons

choucroute

L'élément .tomate passe en position absolute, 

placé en coordonnée top: 0... de son référent .parent

exemple : positionnement absolu

Sortir du Flux

Spécificités

  • Mode de positionnement hors du Flux
  • Il prend la taille de son contenu (par dĂ©faut)
  • Le dĂ©clencheur est position: absolute
  • L'Ă©lĂ©ment se place sur un calque au-dessus du plan initial (Flux)
  • Les coordonnĂ©es dĂ©pendent des propriĂ©tĂ©s top , right , bottom et left
  • Le rĂ©fĂ©rent est un Ă©lĂ©ment ancĂŞtre placĂ© en position: relative (pour simplifier)

du positionnement Absolu

Project Wallace

propriétés : display et position

Fil rouge

https://www.projectwallace.com/analyze-css