Modèle de bbox

Note: 4 propriétés: largeur-contenu, hauteur-contenu, largeur-bordure et hauteur-bordure (correspondant à la largeur et la hauteur avec boîte-dimensionnement: content-Box et Box-dimensionnement: Border-Box) serait utilisé dans la plupart des cas dans lequel actuellement la boîte de contenu et la boîte de bordure modèles sont utilisés. Propriétés: width-Padding et Height-Padding seraient utilisés pour les cas où le modèle de boîte de remplissage-boîte serait utilisé. La largeur-marge et la hauteur-marge sont fournies pour l`exhaustivité, pour avoir un accès cohérent à toutes les dimensions dans le modèle de boîte. La largeur totale d`une boîte correspond à la somme de sa largeur, de sa marge de remplissage, de sa droite, de son padding-left, de sa bordure droite et de ses propriétés de bordure gauche. Dans certains cas, il est ennuyeux (par exemple, si vous voulez avoir une boîte avec une largeur totale de 50% avec la bordure et le rembourrage exprimés en pixels?) Pour éviter de tels problèmes, il est possible de modifier le modèle de boîte avec le dimensionnement de la boîte de propriétés. Avec la valeur border-Box, il modifie le modèle de boîte à ce nouveau: différentes parties du code peuvent manipuler les valeurs comme si le modèle de boîte était mieux adapté pour le type d`opération qui était nécessaire, sans interférer les uns avec les autres. Remarque: consultez la section Propriétés de la boîte de l`article du modèle de boîte pour une vue d`ensemble plus complète et un exemple. Le problème est qu`il est très difficile (sinon carrément impossible) de définir certaines dispositions (en particulier les dispositions fluides et Responsive) en utilisant le modèle de boîte standard si historiquement les gens ont utilisé divs à l`intérieur de divs comme une solution de contournement. Mais comme il turs beaucoup de mises en page si difficile à mettre en œuvre dans le modèle de boîte standard serait simple en utilisant le modèle de boîte d`origine utilisé dans Internet Explorer ainsi dans CSS3 une nouvelle propriété de dimensionnement de boîte a été introduite qui, lorsqu`il est mis à border-Box rend le modèle de boîte de travail comme dans bizarreries mode d`Internet Explorer. Toutes les solutions énumérées ci-dessus ont quelques problèmes. Les deux premiers cassent la disposition du contenu qui attend le modèle de boîte standard. Le dernier tout en ne cassant pas le contenu qui attend le modèle de boîte standard pour tous les éléments (à condition qu`il soit enveloppé dans un élément dont la propriété de taille de boîte est explicitement définie sur la boîte de contenu), il brisera la disposition de tout contenu qui utilise n`importe quelle taille de zone non par défaut pour certains éléments externes, tout en attendant que ses éléments internes aient une taille de boîte définie sur Content-Box (la valeur par défaut dans CSS3 est content-Box-ne pas hériter). Le modèle de boîte de CSS décrit les cases rectangulaires qui sont générées pour les éléments dans l`arborescence du document et disposées selon le modèle de mise en forme visuelle.

Les incohérences des différents modèles de boîtes ont toujours provoqué des problèmes et la question de savoir quel modèle doit être utilisé a entraîné d`innombrables arguments dans la communauté.