Différences dans les types de modèles de boîtes en CSS

Nous savons que le modèle de boîte est un concept important en CSS. Ce n'est qu'en comprenant le modèle de boîte que vous pourrez améliorer la mise en page et la planification, mais de manière générale, il existe deux types de modèles de boîte, une boîte IE. et un modèle de boîte W3C

La portée du modèle de boîte ie comprend également la marge, la bordure, le remplissage et le contenu. La différence par rapport au modèle de boîte w3c standard est la suivante : la partie contenu du modèle de boîte ie comprend une bordure. et remplissage.

Exemple : La marge d'une boîte est de 20px, la bordure est de 1px, le remplissage est de 10px, la largeur du contenu est de 200px et la hauteur est de 50px

Si. interprété à l'aide du modèle de boîte standard du W3C, la position que cette boîte doit occuper est : largeur 20*2+1*2+10*2+200=262px, hauteur 20*2+1*2*10*2+50 =112px, la taille réelle de la boîte est : largeur 1*2+10*2+200=222px, hauteur 1*2+10*2+50=72px

Si vous utilisez le modèle ie box ; , alors la position que cette boîte doit occuper est : largeur 20*2 +200=240px, hauteur 20*2+50=70px, la taille réelle de la boîte est : largeur 200px, hauteur 50px.

Sélection du modèle de box :

Quel est le choix du « modèle de box standard w3c » ? C'est très simple, ajoutez simplement l'instruction doctype en haut de la page Web. Si vous n'ajoutez pas d'instruction doctype, alors chaque navigateur comprendra la page Web en fonction de son propre comportement, c'est-à-dire que le navigateur ie utilisera le modèle ie box pour interpréter votre boîte, et ff utilisera le modèle de boîte w3c standard pour interprétez votre boîte, la page Web est donc affichée différemment selon les navigateurs. Au contraire, si vous ajoutez la déclaration doctype, alors tous les navigateurs utiliseront le modèle de boîte standard du w3c pour interpréter votre boîte, et la page Web sera affichée de manière cohérente dans chaque navigateur.

PS : La différence entre margin et padding en CSS

En CSS, margin fait référence à la distance entre son propre cadre et la bordure d'un autre conteneur à l'extérieur de lui-même, qui est la distance à l'extérieur du conteneur ; le rembourrage est la distance intérieure du conteneur.

1. rembourrage

1. Structure syntaxique

(1)padding-left:10px gauchepadding

(2)padding-right:10px; rembourrage supérieur

(3)padding-top:10px; (4)

padding-bottom

:10px ; rembourrage inférieur(5)rembourrage : 10px ; rembourrage unifié sur les quatre côtés

( 6) rembourrage : 10px 20px ; remplissage supérieur, inférieur, gauche et droit

(7) remplissage : 10px 20px 30px ; remplissage supérieur, gauche et inférieur

(8) remplissage : 10px 20px 30px 40px ; et remplissage gauche

2. Valeurs possibles

(1) length spécifie la longueur du rembourrage en unités spécifiques

(2) % La longueur du rembourrage basée sur le largeur de l'élément parent

(3) auto Le navigateur calcule le remplissage

(4) hériter précise que le remplissage doit être hérité de l'élément parent

3. problèmes de compatibilité

(1) Tous les navigateurs prennent en charge l'attribut padding

(2) Aucune version d'IE ne prend en charge la valeur de l'attribut "inherit"

Je crois que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Introduction détaillée à l'attribut translation en CSS3

Étapes pour implémenter l'effet de halo rotatif en CSS3

Introduction détaillée à l'attribut border-image en Css3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!