Que signifie le modèle de boîte CSS ?

Les modèles de boîte CSS ont tous des attributs tels que le contenu, le remplissage, la bordure et la marge. Ces attributs peuvent être compris en utilisant la chose courante « boîte » dans la vie quotidienne comme métaphore, c'est pourquoi on l'appelle modèle de boîte.

CSS (Cascading Style Sheet) peut être traduit par « feuille de style en cascade » ou « feuille de style en cascade » Il définit comment afficher les éléments HTML et est utilisé. pour contrôler l'apparence de la page Web. En utilisant CSS pour séparer le contenu et la présentation de la page, l'efficacité du travail est grandement améliorée. CSS suppose que tous les éléments du document HTML génèrent une boîte d'élément rectangulaire qui décrit l'espace occupé par l'élément dans la mise en page du document HTML, qui peut être visualisée sous forme de boîte. CSS a développé un concept de « modèle de boîte » autour de ces boîtes. En définissant une série de propriétés liées aux boîtes, il peut grandement enrichir et promouvoir les performances et la structure de mise en page de chaque boîte et même de l'ensemble du document HTML. Pour les éléments qui sont des boîtes, s'il n'y a pas de paramètre spécial, ils occuperont toujours une ligne distincte par défaut, et la largeur est la largeur de la fenêtre du navigateur. Les éléments avant et après celle-ci, qu'ils soient des boîtes ou non, ne peuvent le faire. être disposés au-dessus ou en dessous, c'est-à-dire les disposer cumulativement de haut en bas. Chaque boîte d'un document HTML peut être considérée comme composée de quatre parties de l'intérieur vers l'extérieur, à savoir le contenu, le remplissage, la bordure et la marge. CSS définit une série de propriétés liées pour les quatre parties. En définissant ces propriétés, vous pouvez enrichir les performances de la boîte.

Recommandation de tutoriel vidéo : "Collection de tutoriels CSS-Site Web PHP chinois"

Composition du modèle de boîte

Zone de contenu (contenu)

La zone de contenu est le centre du modèle de boîte. Elle présente le contenu informatif principal de la boîte, qui peut être du texte, des images, etc. La zone de contenu a trois propriétés : largeur, hauteur et débordement. Utilisez les attributs width et height pour spécifier la hauteur et la largeur de la zone de contenu de la boîte. Lorsqu'il y a trop d'informations sur le contenu et dépasse la portée de la zone de contenu, vous pouvez utiliser l'attribut overflow pour spécifier la méthode de traitement. Lorsque la valeur de l'attribut de débordement est masquée, la partie de débordement ne sera pas visible ; lorsqu'elle est visible, les informations sur le contenu de débordement sont visibles et sont simplement présentées en dehors de la boîte lors du défilement, la barre de défilement sera automatiquement ajoutée à la boîte ; , et l'utilisateur peut tirer la barre de défilement pour afficher les informations sur le contenu ; lorsqu'elle est automatique, le navigateur décidera comment gérer la partie de débordement.

Remplissage

Le remplissage est l'espace entre la zone de contenu et la bordure. Il existe cinq attributs de remplissage, à savoir padding-top, padding-bottom, padding-left, padding-right et l'attribut de remplissage rapide padding qui combine les quatre directions ci-dessus. Utilisez ces cinq attributs pour spécifier la distance entre le contenu informatif de la zone de contenu et les bordures dans toutes les directions. Lors de la définition de la propriété de couleur d’arrière-plan de la boîte, vous pouvez étendre la couleur d’arrière-plan dans la zone remplie.

Bordure

La bordure est la limite entourant la zone de contenu et le remplissage. Les propriétés de la bordure incluent border-style, border-width et border-color, ainsi que la propriété de raccourci border border qui combine les trois propriétés ci-dessus. L'attribut border-style est l'attribut le plus important de la bordure. Si le style de bordure n'est pas spécifié, les autres attributs de bordure seront ignorés et la bordure n'existera pas. CSS spécifie neuf styles de bordure : pointillé (ligne pointillée), pointillé (ligne pointillée) et solide (ligne continue). Utilisez l'attribut border-width pour spécifier la largeur de la bordure. La valeur de l'attribut peut être une valeur de mesure de longueur, ou elle peut être fine, moyenne et épaisse spécifiée par CSS. Utilisez l'attribut border-color pour spécifier la couleur correspondante pour la bordure. La valeur de l'attribut peut être une valeur RVB ou les 17 noms de couleurs spécifiés par CSS. Lors de la définition des trois attributs de bordure ci-dessus, vous pouvez soit effectuer des réglages rapides pour les quatre directions globales de la bordure, soit effectuer des réglages spécifiques pour les quatre directions, tels que border: 2px solid green ou border-top-style: solid, couleur de la bordure gauche : rouge, etc. Lors de la définition de l'attribut de couleur d'arrière-plan de la boîte, l'arrière-plan ne s'étendra pas jusqu'à la zone de bordure dans IE, mais dans les navigateurs standard tels que FF, la couleur d'arrière-plan peut s'étendre jusqu'à la zone de bordure, en particulier lorsque la bordure unique est définie sur une ligne pointillée ou une ligne pointillée, l'effet est visible.

Marge vierge (marge)

La marge est située au bord le plus extérieur de la boîte et est l'espace ajouté autour de l'extérieur de la bordure. L'espace blanc empêche les boîtes d'être étroitement reliées entre elles et constitue un moyen important de mise en page CSS. Il existe cinq attributs de marge, à savoir margin-top, margin-bottom, margin-left, margin-right et l'attribut de marge de raccourci margin qui combine les quatre directions ci-dessus. Ses paramètres spécifiques et son utilisation sont similaires à ceux de l'attribut fill. Pour deux boîtes adjacentes (horizontalement ou verticalement) avec une valeur de côté vierge définie, les côtés vierges de leurs parties adjacentes ne seront pas la somme des deux côtés vierges, mais l'union des deux. Si les valeurs de bordure vierge adjacentes des deux ne sont pas de taille égale, la valeur la plus grande des deux est utilisée. Dans le même temps, CSS vous permet de spécifier des valeurs négatives pour la propriété margin. Lorsqu'une valeur de marge négative est spécifiée, la zone entière se déplacera dans la direction opposée à la valeur négative spécifiée, créant ainsi un effet de chevauchement des zones. . Les éléments d'une page Web peuvent être déplacés en spécifiant des valeurs de marge positives et négatives, ce qui constitue une méthode importante dans la technologie de mise en page CSS.

Tutoriel recommandé : "Tutoriel CSS"

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!