CSS layout
Introduction
• Les techniques de mise en page des CSS nous
permettent de prendre des éléments contenus dans
une page web et d'en contrôler le placement, par
rapport à leur position par défaut dans le flot d'une
mise en page courante; par rapport aux autres
éléments environnants et par rapport à leur
conteneur parents ou à la fenêtre principale
d'affichage.
Cours normal
• Le cours normal est la manière dont le navigateur présente les
pages HTML par défaut
Methodes mise en page
• Les méthodes des CSS pouvant changer le placement des
éléments sont les suivantes :
1. La propriété display — les valeurs standards
comme block, inline ou inline-block peuvent changer la
manière dont l'élément se comporte dans le cours
normal.
2. Flotteurs — appliquer à float une valeur
comme left peut créer une juxtaposition d'un élément
bloc à côté d'un autre.
3. La propriété position — vous permet de contrôler avec
précision le placement de boîtes dans d'autres boîtes.
La propriété « display »
• Valeurs: inline | block | inline-block | flex| grid
• CSS
.box{
display: inline;}
La propriété « display »
• Valeurs: inline | block | inline-block | flex| grid
• CSS
.box{
display: block;}
La propriété « display »
• Valeurs: inline | block | inline-block | flex| grid
• CSS
.box{
display: inline-block;}
La propriété “float”
• Float permet aux element de flotter d’un cote
de la page.
• L’application de la propriété CSS ‘clear’ est
necéssaire pour que l’element suivant puisse
revenir á la ligne. Clear prends les valeurs (left,
right, both)
La propriété “float”
• Valeurs: left| right
• CSS
.box{
float: left;}
La propriété “float”
• Valeurs: left| right
• CSS
.box{
float: right;}
La propriété ‘position’
• Valeurs: static(default)| fixed | relative | absolute |stiky
La propriété ‘position’
• Valeur: static
• Comportement normal (par défaut). L'élément
est alors positionné dans le flux avec sa
position.
• Les propriétés top, right, bottom, left et z-
index ne s'appliquent pas.
La propriété ‘position’
• Valeur: relative
• L'élément est positionné dans le flux normal
du document puis décalé, par rapport à lui-
même, selon les valeurs fournies
par ’top’, ’right’, ’bottom’ et ’left’. Le décalage
n'a pas d'impact sur la position des éléments.
La propriété ‘position’
• Valeur: relative
• .box { display: inline-block; background: red; width: 100px; height:
100px; color: white; }
• #deux { position: relative; top: 20px; left: 20px; }
La propriété ‘position’
• Valeur: absolute
• L'élément est retiré du flux normal et aucun
espace n'est créé pour l'élément sur la page. Il
est ensuite positionné par rapport à son
ancêtre le plus proche qui est positionné s'il y
en a un ou par rapport au bloc englobant
initial sinon. La position finale de l'élément est
déterminée par les valeurs
de top, right, bottom et left.
La propriété ‘position’
• Valeur: absolute
• .positioned { position: absolute; background: yellow;
top: 30px; left: 30px; }
La propriété ‘position’
• Valeur: fixed
• Un élément avec position : fixe ; est positionné par
rapport à la fenêtre, ce qui signifie qu'il reste
toujours au même endroit même si la page défile.
Les propriétés top, right, bottom et left sont utilisées
pour positionner l'élément.
La propriété ‘position’
• Valeur: sticky
• Le positionnement sticky est une hybridation des
positionnements ‘relative’ et ‘fixed’. L'élément est
traité en position relative jusqu'à ce qu'il dépasse un
seuil spécifié, á partir duquel il sera traité en position
fixe.