Le modèle de bo?te CSS est essentiel pour contr?ler la disposition de la page Web, car chaque élément est traité comme une bo?te avec quatre composants: contenu, rembourrage, bordure et marge. 1. La zone de contenu contient du texte ou des images. 2. Le rembourrage ajoute un espace interne entre le contenu et la bordure. 3. Border s'enroule autour du rembourrage et du contenu. 4. La marge crée des éléments de séparation d'espace externe. Par défaut, la largeur s'applique uniquement à la zone de contenu, mais à l'aide de la taille de bo?te: Border-Box; Comprend le rembourrage et la bordure de la largeur. Une utilisation appropriée de la marge et du rembourrage garantit un espacement efficace, avec des éléments de séparation des marges et un rembourrage ajoutant de l'espace interne, tout en étant conscient de l'effondrement de la marge verticale et des interactions de méthode de disposition.

Le modèle CSS Box est le fondement de la mise en page dans la conception Web - chaque élément d'une page Web est essentiellement une bo?te. Comprendre comment ces bo?tes se comportent vous aident à contr?ler l'espacement, l'alignement et le dimensionnement plus efficacement. Si vous êtes nouveau dans CSS ou que vous cherchez à affiner vos compétences de mise en page, enrouler votre tête autour du modèle de bo?te est essentiel.

Qu'est-ce qui constitue le modèle de bo?te?

à la base, le modèle CSS Box se compose de quatre parties: contenu, rembourrage, bordure et marge - en couches comme un oignon autour du contenu réel.

• Le contenu est l'endroit où vivent votre texte, images ou autres médias.
• Le rembourrage ajoute de l'espace à l'intérieur de l'élément, entre le contenu et la bordure.
• La frontière s'enroule autour du rembourrage et du contenu.
• La marge crée un espace à l'extérieur de l'élément, le séparant des autres éléments.

Ainsi, lorsque vous définissez la largeur d'un élément, dites width: 200px; , cela ne s'applique qu'à la zone de contenu par défaut. Si vous ajoutez un rembourrage, une bordure ou une marge, la largeur visible totale devient supérieure à 200px à moins que vous ne modifiez le comportement de dimensionnement de la bo?te (plus à ce sujet plus tard).

Comment contr?ler le dimensionnement avec box-sizing

Par défaut, comme nous venons de le voir, la définition d'une largeur comprend uniquement la zone de contenu. Cela peut entra?ner des problèmes de mise en page inattendus car le rembourrage et les frontières rendent les choses plus grandes que prévu.

C'est là que box-sizing est utile. Vous avez deux options principales:

• box-sizing: content-box; (par défaut) - La largeur et la hauteur s'appliquent uniquement à la zone de contenu.
• box-sizing: border-box; - La largeur et la hauteur comprennent le rembourrage et la bordure, ce qui facilite la planification de la disposition.

Une pratique courante consiste à appliquer border-box à l'échelle mondiale afin que tous les éléments se comportent de manière cohérente:

 * {
  Dimensionnement en bo?te: Border-Box;
}

Avec cette règle, si vous définissez width: 200px; , le rembourrage et les frontières ne pousseront pas cette largeur au-delà de 200px - ce qui rend les dispositions de construction beaucoup plus fluide.

En utilisant efficacement la marge et le rembourrage

Obtenir un bon espacement est l'une des parties les plus délicates du CSS - et aussi l'une des plus importantes. Voici comment utiliser la marge et le rembourrage sans être déclenché:

• Utilisez le rembourrage pour créer de l'espace à l'intérieur d'un élément - utile pour ajouter une salle de respiration autour du texte à l'intérieur d'un bouton ou d'une carte.
• Utilisez la marge pour séparer les éléments les uns des autres - idéal pour l'espacement des paragraphes, des cartes ou des sections.

Une chose à surveiller: les marges verticales peuvent s'effondrer. Cela signifie que si deux éléments empilés verticalement ont les deux marges supérieures et inférieures, leurs marges peuvent fusionner en une seule marge au lieu de s'additionner. Ce comportement est normal mais parfois déroutant.

Voici quelques conseils rapides:

• Pour centrer un élément de niveau bloc horizontalement, utilisez margin: 0 auto; .
• évitez de mélanger le rembourrage basé sur le pourcentage avec un contenu à largeur fixe - il peut devenir plus désordonné.
• Lorsque vous utilisez Flexbox ou Grid, ces méthodes de disposition peuvent affecter le fonctionnement des marges et du rembourrage, alors testez au fur et à mesure.

Ce sont les bases du modèle CSS Box - pas flashy, mais absolument essentiel. Une fois que vous comprenez comment chaque pièce interagit, vous aurez beaucoup plus de facilité à construire des dispositions cohérentes.

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!