Comment calculer la taille du modèle de boîte CSS

La taille du modèle de boîte standard est : "la largeur et la hauteur du contenu + la taille du remplissage des deux côtés + la taille des bordures des deux côtés" tandis que la taille de la boîte IE ; model est directement : "la largeur du contenu "Hauteur", l'attribut largeur/hauteur défini par la boîte est la taille globale de la boîte elle-même. Si elle a un remplissage ou des bordures, cela est obtenu en réduisant la zone de contenu.

L'environnement d'exploitation de ce tutoriel : Système Windows 7, version CSS3, cette méthode convient à toutes les marques d'ordinateurs.

(Tutoriel recommandé : Tutoriel vidéo CSS)

Le modèle de boîte peut être utilisé pour mettre en page des éléments, y compris le contenu réel (contenu) et le remplissage (padding), la bordure (bordure ) et marge (marge).

1. Classification des modèles de boîte

Les modèles de boîte sont divisés en deux types : c'est à dire le modèle de boîte (modèle de boîte bizarre) et la boîte w3c standard modèle .

2. Modèle standard et modèle IE Taille calcul

1. Calcul de la taille de la boîte standard

La taille de la boîte elle-même : la largeur et la hauteur du contenu + la taille de le remplissage des deux côtés +La taille des bordures des deux côtés

La taille de la case sur la page : la largeur et la hauteur du contenu + les marges intérieures des deux côtés + les bordures des deux côtés + les marges extérieures des deux côtés

2 , Calcul de la taille de la boîte IE

La taille de la boîte elle-même : la largeur et la hauteur du contenu

La taille de la boîte occupant la page : la largeur et la hauteur du contenu + les marges des deux côtés

La boîte IE définit directement les attributs largeur/hauteur sur la taille globale de la boîte elle-même. il a des marges ou des bordures intérieures, il est obtenu en réduisant la zone de contenu

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!