Quel est le modèle de boîte CSS ?

Le modèle de boîte CSS est un modèle de pensée utilisé par la technologie CSS qui est souvent utilisé dans la conception Web. Il est également appelé modèle de boîte et est composé de plusieurs éléments : contenu d'élément (contenu), remplissage (padding), bordure (bordure) et marge extérieure (marge) (comme le montre la figure ci-dessous).

Nous pouvons comprendre ces attributs en les transférant aux boîtes (boîtes) de notre vie quotidienne. Les boîtes que nous voyons dans notre vie quotidienne sont aussi des boîtes qui peuvent contenir des choses. Elles ont aussi ces attributs, donc elles le sont. appelé C'est le mode boîte.

La boîte la plus intérieure de l'image est le contenu réel de l'élément, c'est-à-dire la boîte de l'élément à côté de la boîte de l'élément se trouve le remplissage de la marge intérieure, suivi de La bordure (bordure), puis la couche la plus externe est la marge (marge), qui constitue le modèle de boîte. Habituellement, la zone d'affichage d'arrière-plan que nous définissons correspond à la plage de contenu, de remplissage et de bordures. La marge extérieure est transparente et ne bloquera pas les autres éléments environnants.

Ensuite, la largeur totale de la boîte de l'élément = la largeur de l'élément + la valeur des marges gauche et droite du padding + les valeurs des marges gauche et droite de la marge + la gauche et largeur droite de la bordure ;

La hauteur totale de la boîte de l'élément = la hauteur de l'élément + la valeur des marges supérieure et inférieure du padding + la valeur des marges supérieure et inférieure + le haut et la largeur inférieure de la bordure.

Structure

Le contenu (CONTENT) est ce qu'il y a dans la boîte

Et le rembourrage (PADDING) est la peur de ce qu'il y a dans la boîte ; (coûteux () mousse ou autres accessoires antisismiques ajoutés en raison de dommages ;

La bordure (BORDER) est la boîte elle-même ; quant à la bordure (MARGIN), cela signifie que lorsque les boîtes sont placées, elles Tous ne peuvent pas être empilés et un certain espace doit être prévu pour la ventilation, mais aussi pour un retrait facile. Dans la conception Web, le contenu fait souvent référence à du texte, des images et d'autres éléments, mais il peut également s'agir de petites boîtes (DIV imbriquées). Contrairement aux boîtes de la vie réelle, les éléments de la vie réelle ne peuvent généralement pas être plus grands que des boîtes, sinon la boîte sera étirée. Cassé, et la boîte CSS est élastique. Les objets à l'intérieur sont plus grands que la boîte elle-même et l'étireront au maximum, mais elle ne sera pas endommagée.

Padding n'a qu'un attribut width, chaque balise HTML peut être considérée comme une boîte

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!