Modele de box

Depuis l`aube de CSS, le modèle de boîte a fonctionné comme ceci par défaut: le modèle de boîte est l`une des parties les plus déroutantes d`apprendre à écrire le HTML et le CSS. Il est également l`une des parties les plus puissantes de HTML et CSS, et une fois que nous l`avons maîtrisé, la plupart des autres-comme le contenu de positionnement-viendra à nous assez facilement. Le modèle de boîte CSS est essentiellement une boîte qui s`enroule autour de chaque élément HTML. Il se compose de: marges, bordures, rembourrage et le contenu réel. L`image ci-dessous illustre le modèle de boîte: en comparaison, selon le modèle de boîte, la hauteur totale d`un élément peut être calculée à l`aide de la formule suivante: le modèle de boîte nous permet d`ajouter une bordure autour des éléments, et de définir l`espace entre les éléments. Mais, dans les jours de conception à largeur fixe, il n`était pas particulièrement compliqué de travailler avec le modèle de boîte par défaut une fois que vous l`avez compris. Vous pouvez effectuer un peu d`arithmétique pour déterminer le nombre de pixels dont vous avez besoin pour découper la largeur ou la hauteur déclarée d`un élément pour tenir compte de son remplissage et de sa bordure. Le problème pour les développeurs actuels est que ces longueurs de pixel absolues ne se traduisent pas en Responsive Design, de sorte que le même calcul ne s`applique plus. Le «modèle de boîte de CSS» est un ensemble de règles qui déterminent les dimensions de chaque élément dans une page Web. Il donne à chaque boîte (à la fois inline et bloc) quatre propriétés: apprendre toutes les différentes parties du modèle de boîte n`est pas un petit exploit.

Ces concepts, bien que brièvement introduits, prennent un peu de temps à maîtriser pleinement, et nous sommes sur la bonne voie vers le faire. Excellent poste. Vous avez acheté quelques points intéressants ici. La section sur les valeurs par défaut m`a donné quelque chose à penser. Comprendre les différentes façons dont les différents navigateurs fonctionnent avec ces modèles est essentiel pour découper le piratage inutile et fastidieux, aucun nom mentionné,… Dec La valeur de la boîte de contenu est la valeur par défaut, ce qui laisse le modèle de boîte comme une conception additive. Si nous n`utilisons pas la propriété Box-dimensionnement, il s`agit de la valeur par défaut de tous les éléments. La taille d`un élément commence par les propriétés Width et Height, puis toutes les valeurs de propriété Padding, Border ou margin sont ajoutées à partir de là.