Dimensions
Les éléments incorporés
La dimension d'un élément
incorporé est déterminé par son seul
contenu :
- nombre de caractères de texte
- caractéristiques de la police
- dimension des images
- dimension des éléments
incorporés enfants
Ces dimensions ne peuvant être modifiés, les
éléments incorporés ne sont pas
concernés.
Dimensions par défaut pour les
éléments de bloc
Largeur par défaut
largeur des éléments de bloc dans le
flux
L'ensemble des éléments à
l'exclusion des éléments
déclarés en position absolue (position:absolute)
ou comme flottants (float:left ou float:right) s'inscrive dans le flux.
parent
: padding:20px;
un
élement de bloc dans le flux margin:30px;
un
élement de bloc dans le flux margin:30px; qui
s'étend sur plusieurs lignes ....... .......... ........
........ ........ ....... .......... ........ ........ ........ .......
.......... ........ ........ ........
....... .......... ........ ........ ........ ....... ..........
........ ........ ........
La largeur par défaut d'un
élément de bloc dans le flux occupe la
totalité de
la largeur de l'élément parent diminué
des marges gauches et droites de l'élément et des
marges intérieures de l'élément
parent.
largeur(élément)=largeur(parent(élément))
- margin-left(élément) -
margin-right(élément) -
padding-left(parent(élément))
- padding-right(parent(élément))
largeur des éléments hors du flux
Les éléments hors du flux sont les
éléments flottants et ceux en position absolue ou fixed.
parent
: padding:20px;
un
élement en position absolue
un
élement de bloc en position abslolue qui
s'étend sur plusieurs lignes ....... .......... ........
........ ........ ....... .......... ........ ........ ........ .......
.......... ........ ........ ........
....... .......... ........ ........ ........ ....... ..........
........ ........ ........
La largeur d'un élément hors du flux
s'adapte à la largeur de son contenu. ( Observer la position
du second élément à droite par rapport
à son par
La largeur d'un élément hors du flux
s'adapte à la largeur de son contenu. ( Observer la position
du second élément à droite par rapport
à son parent)
Notons qu'un élément en position absolue
dont les propriétés left
et right sont
définies aura une largeur conditionnée par ces
deux propriétés
Hauteur par défaut
parent
: padding:20px;
un
élement dans le flux qui
s'étend sur plusieurs lignes ....... .......... ........
........ ........ ....... .......... ........ ........ ........ .......
.......... ........ ........ ........
....... .......... ........ ........ ........ ....... ..........
........ ........ ........ ........ ........ ....... ..........
........ ........ ........ .......
........ ........ ....... .......... ........ ........ ........ .......
........ ........ ....... .......... ........ ........ ........ .......
un
élement de bloc en position absolue en position absolue qui
s'étend sur plusieurs lignes ....... .......... ........
........ ........ ....... .......... ........ ........ ........ .......
.......... ........ ........ ........
....... .......... ........ ........ ........ ....... ..........
........ ........ ........
........ ........ ....... .......... ........ ........ ........ .......
........ ........ ....... .......... ........ ........ ........ .......
........ ........ ....... .......... ........ ........ ........ .......
Par défaut,
si l'élément est en position absolue et
la propriété top et
bottom sont
définies simultanément, alors la hauteur est
conditionnée par ces deux propriétés.
sinon la hauteur d'un élément
de
bloc s'adapte à son contenu, la largeur étant
fixée par les règles
précédentes.
Fixer les dimensions
La propriété width
permet de fixer la
largeur d'un élément de bloc.
- en px pour une largeur fixe
- en % pour une lageur proportionnée à
l'élément parent
- en em pour une largeur proportionnée
à la taille de police de l'élément
La hauteur de l'élément s'adapte de
sorte à afficher la totalité du contenu
La propriété height
permet de fixer la hauteur d'un élément de bloc.
- en px pour une hauteur fixe
- en % pour une hauteur proportionnée à
l'élément parent
- en em pour une hauteur proportionnée
à la taille de police de l'élément
L'éventuel débordement du contenu par
rapport à la largeur et la hauteur fixée est
géré par la propriété
overflow
Encadrer les dimensions
Lorsque les dimensions d'un élément sont
dépendantes de la taille de la fenêtre, on peut
fixer une valeur minimale et maximale pour la largeur
et la hauteur d'un élément. A cet effet on on
dispose des propriétés :
- min-width
- max-width
- min-height
- max-height
Les propriétés de dimensions ne sont ps héritées
