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

Le modèle de boîte CSS fait référence au « modèle de boîte », qui est essentiellement une boîte qui encapsule les éléments HTML environnants. Il comprend les marges, les bordures, le remplissage et le contenu réel qui peut être considéré comme des boîtes. et les modèles de boîte nous permettent de placer des éléments dans l'espace entre d'autres éléments et les bordures de l'élément environnant.

Noms d'attributs couramment entendus dans la conception Web : contenu, remplissage, bordure, marge, CSS Le modèle de boîte a ces propriétés.

Le terme « modèle de boîte » est utilisé dans la conception et la mise en page.

Nous pouvons comprendre ces attributs en utilisant une métaphore d'une chose courante dans la vie quotidienne - une boîte, c'est pourquoi nous l'appelons le modèle de boîte.

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.

Principe

Parlons d'abord de nos pages web : contenu, padding, border, margin, CSS Le modèle de boîte a ces propriétés.

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.

Caractéristiques

Imaginez une boîte, elle en a quatre : margin, border, padding et content Attributs

Regardons cette boîte en bas. a quatre côtés, haut, bas, gauche et droite, donc chaque attribut comprend quatre parties en plus du contenu : haut, bas, gauche et droite ; ces quatre parties peuvent être définies en même temps ou séparément ; être compris comme la distance entre le contenu de la boîte et la bordure, et la bordure est divisée en épaisseur et en couleur. Le contenu est le contenu au milieu de la boîte, et la marge extérieure est l'espace vide automatiquement laissé à l'extérieur 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!