‫جامعة وهران للعلوم و التكنولوجيا محمد بوضياف‬

‫كلية الرياضيات و االعالم االلي‬

Université des Sciences et de la Technologie d'Oran Mohamed-Boudiaf USTOMB
Faculté Des Mathématiques Et Informatique

BUREAUTIQUE ET WEB
Cascading Style Sheets
CSS (Le modèle de boite)

TRONC COMMUN RESPONSABLE

INGÉNIEUR EN INFORMATIQUE
USTO-MB MESSOUS Abderrahmane
 Plan du cours

I. Le modèle de boite

II. Positionnements en CSS

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Le modèle de boite

Le modèle de boite
En CSS, tous les éléments sont rangés dans des boîtes (en anglais box). Lorsque l’on
travaille sur la mise en page et le positionnement des éléments HTML il est alors
essentiel de bien comprendre le fonctionnement de ces boîtes.
Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en
page CSS ainsi que le positionnement des éléments d'une page HTML.

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Le modèle de boite

Les boîtes en ligne et boîte de bloc

En CSS, il existe deux types de boîtes :
Les boîtes en bloc (block) : Si une boîte est définie en bloc :
- La boîte s'étend en largeur pour remplir totalement l'espace offert par son conteneur.
- La boîte occupe sa propre nouvelle ligne et crée un retour à la ligne. Contenu
- Les propriétés de largeur (width) et de hauteur (height) sont toujours respectées.
- Les propriétés padding, margin et border auront pour effet de repousser les autres éléments.
block-element
Si une boîte est positionnée en ligne, alors :
- La boîte ne crée pas de retour à la ligne, les autres éléments se suivent donc en ligne.
- Les propriétés de largeur (width) et de hauteur (height) ne s'appliquent pas.
- Le padding , les marges et les bordures verticales (en haut et en bas) seront appliquées mais ne Contenu
provoqueront pas de déplacement des éléments alentours.
- Le padding , les marges et les bordures horizontales (à gauche et à droite) seront appliquées et Inline-element
provoqueront le déplacement des éléments alentours.

Le type de boîte appliqué à un élément est défini par la valeur de la propriété display (tel que block ou inline)

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Le modèle de boite

Le modèle de boîte CSS

Lorsque nous spécifions les propriétés (width) et (height), celles-ci définissent alors la hauteur et la
largeur du contenu. La taille du padding et de la bordure (s'ils existent) s'ajoutent à la largeur et à la
hauteur définies dans width et height pour obtenir les dimensions totales occupées par la boîte.
Les marges ne rentrent pas dans le compte.

.box {
width: 350px;
height: 150px;
margin: 10px;
padding: 25px;
border: 5px solid black;
}

L'espace occupé par notre boîte dans le modèle standard vaut alors 410px (350 + 25 + 25 + 5 + 5), et
la hauteur, 210px (150 + 25 + 25 + 5 + 5).

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Le modèle de boite

Le modèle de boîte CSS .box {

width: 350px;

height: 150px;
Il n'est pas très commode d'avoir à ajouter constamment les dimensions de la margin: 10px;
bordure et du padding aux dimensions du conteneur padding: 25px;
border: 5px solid black;

box-sizing: border-box

Pour inclure directement les padding et border aux dimensions du conteneur, nous utilisons la
propriété CSS box-sizing: border-box. Cela revient à demander au navigateur de considérer la boîte
de la bordure comme la zone d'effet de width et height.

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Le modèle de boite

Margin
La propriété margin définit la taille des marges sur les quatre côtés de l'élément. C'est une propriété
raccourcie qui permet de manipuler les autres propriétés de marges :

margin-top, margin-right, margin-bottom et margin-left. /* La propriété s'applique aux quatre côtés */

margin: 1em;
- Il est possible d'utiliser des valeurs négatives pour chacun des côtés.
/* vertical | horizontal */

- Les marges haute et basse n'ont aucun effet sur les éléments en ligne (inline). margin: 5% auto;
/* haut | horizontal | bas */
- La propriété margin peut être définie grâce à une, deux, trois ou quatre valeurs. margin: 1em auto 2em;

- Avec une valeur, celle-ci définira la marge pour les quatre côtés de la /* haut | droit | bas | gauche */

boîte margin: 2px 1em 0 auto;

- Avec deux valeurs, la première s'appliquera aux côtés haut et bas et la

seconde aux côtés gauche et droit margin-top
- Avec trois valeurs, la première s'appliquera au côté haut, la deuxième
aux côtés gauche et droit et la troisième au côté bas
margin-left élément margin-right
- Avec quatre valeurs, la première s'appliquera en haut, la deuxième à
droite, la troisième en bas et la quatrième à gauche.
margin-bottom
Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web
 CSS Le modèle de boite

Padding
La propriété padding est une propriété raccourcie qui permet de définir les différents écarts
de l'espace entre le contenu de l'élément et sa bordure sur les quatre côtés d'un élément.
Elle synthétise padding-top, padding-right, padding-bottom, padding-left.
- Une valeur applique le même écart aux 4 côtés.
- Deux valeurs appliquent le premier écart en haut et en bas et le second sur les côtés droit et gauche.
- Trois valeurs appliquent le premier écart en haut, le deuxième à droite et à gauche et le troisième en bas.
- Quatre valeurs appliquent le premier écart en haut, le deuxième à droite, le troisième en bas et le quatrième à
gauche.

Les valeurs négatives ne sont pas autorisées. /* On applique la même valeur aux quatre côtés */
padding: 1em;
1 - padding-top /* vertical | horizontal */
4 2 padding: 5% 10%;
padding-left padding-right /* haut | horizontal | bas */
Élément padding: 1em 2em 2em;
/* haut | droit | bas | gauche */
padding: 5px 1em 0 2em;
3 - padding-bottom
Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web
 CSS Le modèle de boite

Border
La propriété CSS border est une propriété raccourcie qui permet de définir les
propriétés liées à la bordure. border peut être utilisée pour définir les valeurs de :
- border-width, est une propriété raccourcie qui définit la largeur de la bordure d'un élément. Cette propriété
raccourcie définit border-top-width, border-right-width, border-bottom-width et border-left-width.
- border-style, est une propriété raccourcie qui permet de définir le style des lignes utilisées pour les bordures
des quatre côtés de la boîte d'un élément.
- border-color. Permet de définir la couleur des bordures

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Le modèle de boite

Le positionnement display: inline-block

display: inline-block constitue un compromis entre la disposition en ligne et la

disposition en bloc. Elle emprunte des règles des deux dispositions pour satisfaire
ces motivations :
- La hauteur (height) et la largeur (width) seront appliquées sur l'élément (et non ignorés).
- Les propriétés padding, margin et border repousseront bien les éléments alentours.

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Le modèle de boite

Débordement dans les boites

• Si vous dimensionnez une boîte avec les propriétés width et height et que le contenu ne rentre pas,
alors il va déborder de la boîte en question. Le débordement peut être horizontal ou vertical.

• Pour gérer les débordements de contenu sur une boîte, la propriété CSS overflow. Cette propriété
permet de masquer le contenu qui déborde. Vous pouvez alors choisir d’ajouter ou non des barres de
défilement afin de pouvoir consulter le contenu masqué.

Lorem ipsum dolor sit

amet consectetur adipisicing
elit. Corporis nobis
voluptatum amet,
recusandae voluptates ipsam
odit aspernatur neque quas
est consectetur quia saepe
delectus quis a voluptate
voluptas alias debitis.

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 Positionnement en CSS

1. Position
2. Z-index
3. Float

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Positionnement en CSS

Le positionnement
Le positionnement permet de modifier le cours classique de la mise
en page pour produire des effets intéressants. Le positionnement
permet de sortir les éléments du flux normal de la composition du
document.

La propriété de Position CSS position permet de spécifier si un

élément est positionné ou pas et spécifie par la même occasion son
type de positionnement.

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Positionnement en CSS

Le positionnement
Seul un élément positionné interprète les feuilles de styles de
position left, top, right et bottom.

La propriété de feuille de style position CSS peut prendre la valeur

de position :
top
-position : static;
-position : absolute; -Top
right
left -position : relative; -Right
-position : fixed; -Bottom
-position : sticky;
bottom -Left

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Positionnement en CSS

Principe de base pour créer un élément positionné

• Nous devons d'abord spécifier la règle du positionnement avec la
propriété CSS position,
• c'est-à-dire spécifier le contexte de positionnement qui définit les points
d'origines des nouvelles positions de l'élément.
• Dans un deuxième temps, vous devez spécifier la nouvelle
position d'un ou des "côtés" de l'élément que nous voulons
positionner
top
left

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Positionnement en CSS

static
Par défaut, les éléments html ont une position static qui n'est pas
considéré comme un élément positionné, left, top, right et bottom
sont ignorés.

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Positionnement en CSS

Relative
• L’élément est considéré comme positionné,
• le positionnement se fera par rapport à l'endroit où il est positionné
dans le flux (où l'élément a été déclaré dans le code HTML).

Parent
top
1 Relative 3

4 5 6

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Positionnement en CSS

Absolute

• L’élément est considéré comme positionné, top

• le positionnement se fera par rapport au coin left

#Enfant

haut gauche de la page HTML ou par rapport au

Absolute

premier parent trouvé qui n'est pas static. #Parent non positionné

• Son comportement est de type block et sort du

flux.

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Positionnement en CSS

Absolute
CSS
top
#parent{position :static;}
left
#enfant{position :absolute; top:10px; left:10px}
#Enfant
Absolute

Le parent est static donc le

#Parent non positionné positionnement de l’enfant se fait par
HTML port au document html
<div></div>
<div id=”#parent”>
#Parent non positionné
<div id=”#enfant”> #Enfant Absolute </div>
</div>
CSS
#parent{position :relative;}
#enfant{position :absolute; top:10px; left:10px}

top #Parent non positionné Le parent est relative donc le

left positionnement de l’enfant se fait par
#Enfant
Absolute
port au document au parent

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Positionnement en CSS

Absolute
top #Parent non positionné
➢ Width et height non déclarées
left right
#Enfant Absolute
CSS - Les dimensions de l’élément dépend des
#parent{position :relative;} propriétés top, right, bottom et left si ils
#enfant{position :absolute; top:10px; left:10px; sont déclarées
right:10px}
- Si non l’élément pend la largeur et la
hauteur de son contenu

#Parent non positionné CSS

#parent{position :static;} ➢ Width et height déclarées
#enfant{position :absolute; bottom:10px;
Les dimensions de l’élément sont définit
right:10px; width:50px; height:75px}
par width et height
width
- Si top et bottom sont déclarées alors la
right priorité est pour top
height #Enfant
Absolute
- Si left et right sont déclarées alors la
bottom propriété est pour left

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Positionnement en CSS

Fixed
l'élément servant de contexte de positionnement est la zone de contenu
visible de la fenêtre du navigateur (body).
Fixed a le même comportement que celui de Absolute a la différence que
l'élément reste visuellement au même endroit quand on utilise les scrollbarre.
L'élément repositionné sort du flux normal.

top CSS
left left #parent{position :relative;}
#Enfant Absolute
#enfant{position :fixed; top:10px; right:10px; bottom:10px; left:10px}

#Parent non positionné

bottom

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Positionnement en CSS

Sticky

-Un élément positionné avec position : sticky va

avoir une position relative au départ puis son
positionnement va devenir fixe à partir d’un
certain niveau de défilement de la page. #Parent non positionné
#Enfant Absolute

-Les propriétés top, left, bottom et right vont nous

permettre de pouvoir préciser à partir de quel
moment l’élément positionné avec position :
sticky va devoir être fixe.
-Par défault un élément positionné en sticky
prend toute la largeur de sont parent sauf si
width et height sont déclarées

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Positionnement en CSS

z-index
• Les éléments HTML vont pouvoir être positionné dans
une page en CSS selon 3 dimensions : Z-index=1
• selon la largeur (axe horizontal ou axe des X en math), Z-index=3
• la hauteur (axe vertical ou axe des Y) Z-index=4
Z-index 5
• et également selon une épaisseur ou un ordre d’empilement
(axe des Z).
• La propriété z-index va permettre de choisir quel élément doit apparaitre
au-dessus de quel ordre en donnant un index sous forme de nombre à un
ou plusieurs éléments.
• Ainsi, lorsque deux éléments se chevauchent, celui possédant la plus grande
valeur pour son z-index apparaitra au-dessus de l’autre.
• Notez que la propriété CSS z-index ne va fonctionner (et n’a de sens)
qu’avec des éléments HTML positionnés
Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web
 CSS Positionnement en CSS

Les boîtes flottantes

• la propriété float est utilisé pour créer des dispositions sur plusieurs colonnes
dans des pages web.
• A la base c’est une propriété conçue pour faire flotter des images à l'intérieur
d'un bloc de texte. Le texte se développant autour de cette image sur la
gauche ou sur la droite.
• La propriété CSS float permet de spécifier qu'un élément flotte à gauche, à
droite ou pas du tout au sein de son élément conteneur.

Lorem ipsum dolor sit amet, consectetuer adipiscing

elit. Maecenas porttitor congue massa. Fusce
Élément flottant à gauche posuere, magna sed pulvinar ultricies, purus lectus
malesuada libero, sit amet commodo magna eros
quis urna.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor
congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus
malesuada libero, sit amet commodo magna eros quis urna.

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Positionnement en CSS

Les boîtes flottantes

• Si l'élément est flottant, les autres éléments de type en ligne (inline)
entoureront alors ce dernier.
• Un élément ayant une propriété CSS float sa hauteur n'est pas prise en
compte dans le redimensionnement de son conteneur,
• La propriété float CSS est mise à none, si la propriété de feuille de style
position Css a la valeur absolute.

Conteneur

Enfant flotant Enfant flotant Enfant flotant

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web

 CSS Positionnement en CSS

Dégagement des boîtes flottantes

• La propriété clear indique si un élément peut être situé à côté d'éléments flottants qui le
précèdent ou s'il doit être déplacé vers le bas pour être en dessous de ces éléments.
• La propriété clear s'applique aux éléments flottants comme aux éléments non-flottants.
• La propriété clear peut avoir l'une des valeurs suivantes :
• Left : L'élément est poussé sous les éléments flottants à gauche
• Right : L'élément est poussé sous les éléments flottants à droite
• Both : L'élément est poussé sous les éléments flottants gauche et droit

Conteneur

Enfant flotant Enfant flotant Enfant flotant

Clear=both/left/right

Tronc commun Ingénieur en Informatique USTO-MB Bureautique et Web