CSS Box Model
Le modèle de boîte CSS
Tous les éléments HTML peuvent être considérés comme des boîtes. En CSS, le "modèle de boîte" terme est utilisé quand on parle de la conception et la mise en page.
Le modèle de boîte CSS est essentiellement une boîte qui s'enroule autour des éléments HTML, et il se compose de: marges, des bordures, le remplissage et le contenu proprement dit.
Le modèle de boîte nous permet de placer une bordure autour des éléments et des éléments d'espace par rapport à d'autres éléments.
L'image ci-dessous illustre le modèle de boîte:
Explication des différentes parties:
- Marge - Efface une zone autour de la frontière. La marge n'est pas une couleur de fond, il est complètement transparent
- Frontaliers - Une frontière qui fait le tour du rembourrage et le contenu. La frontière est affectée par la couleur de fond de la boîte de
- Rembourrage - Efface une zone autour du contenu. Le rembourrage est affectée par la couleur de fond de la boîte de
- Contenu - Le contenu de la boîte, où le texte et les images apparaissent
Afin de définir la largeur et la hauteur d'un élément correctement dans tous les navigateurs, vous avez besoin de savoir comment fonctionne le modèle de boîte.
Largeur et hauteur d'un élément
Important: Lorsque vous définissez la largeur et la hauteur de propriétés d'un élément avec CSS, vous venez de définir la largeur et la hauteur de la zone de contenu . Pour calculer la taille complète d'un élément, vous devez également ajouter le rembourrage, les frontières et les marges.La largeur totale de l'élément dans l'exemple ci-dessous est 300px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
padding:10px;
border:5px solid gray;
margin:10px;
Faisons le calcul:
250px (largeur)
+ 20px (padding gauche et droite)
+ 10px (bordure gauche et droite)
+ 20px (marge de gauche et de droite)
= 300px
250px (largeur)
+ 20px (padding gauche et droite)
+ 10px (bordure gauche et droite)
+ 20px (marge de gauche et de droite)
= 300px
Supposons que vous aviez seulement 250px de l'espace. Faisons un élément avec une largeur totale de 250px:
La largeur totale d'un élément doit être calculée comme ceci:
Largeur de l'élément total = largeur + padding gauche + droite + padding bordure gauche + droite + la frontière marge de gauche + marge de droite
La hauteur totale d'un élément doit être calculée comme ceci:
Hauteur d'élément Hauteur totale = padding + top + padding-bottom + bordure supérieure + border-bottom + marge supérieure + inférieure marge
Problème de compatibilité des navigateurs
L'exemple ci-dessus ne s'affiche pas correctement dans IE8 et les versions antérieures.
Versions IE8 et plus tôt comprend padding et la bordure de la largeur, si un DOCTYPE n'est pas déclarée .
Pour résoudre ce problème, il suffit d'ajouter un DOCTYPE de la page HTML:
Exemple
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
Essayez vous-même »
0 commentaires:
Post a Comment
HELLO VISITORS THANKS FOR YOUR VISIT AND COMMENT