CSS3 box-sizing: margin-box; Pourquoi pas?

Pourquoi n'avons-nous pas box-sizing: margin-box;? Habituellement, lorsque nous insérons box-sizing: border-box;nos feuilles de style, nous entendons vraiment les premières.

Exemple:

Disons que j'ai une mise en page à 2 colonnes. Les deux colonnes ont une largeur de 50%, mais elles ont l'air plutôt moche car il n'y a pas de gouttière (espace au milieu); Voici le CSS:

.col2 {
    width: 50%;
    float: left;
}

Pour appliquer une gouttière, vous pourriez penser que nous pourrions simplement définir une marge droite sur la première des 2 colonnes; quelque chose comme ça:

.col2:first-child {
    margin-right: 24px;
}

Mais cela ferait en sorte que la deuxième colonne s'enroule sur une nouvelle ligne, car ce qui suit est vrai:

50% + 50% + 24px > 100%

box-sizing: margin-box;résoudrait ce problème en incluant une marge dans la largeur calculée de l'élément. Je trouverais cela très utile sinon plus utile que box-sizing: border-box;.

Tu ne pourrais pas utiliser width: calc(50% - 24px);pour tes cols? Ensuite, définissez vos marges.

Je pense que nous pourrions avoir un box-sizing: margin-box. Le modèle de boîte css montre exactement quelles sont les positions des marges des cadres.

Il y a des problèmes mineurs - par exemple, les cases de marge peuvent se chevaucher - mais ils ne sont pas difficiles à résoudre.

Je pense que la situation est la même, comme nous pouvons le voir avec les combinaisons overflow-x& overflow-y, avec les divs positionnés absolus dans les cellules de tableau, avec la combinaison de min | max-width | height avec le box-sizing, et ainsi de suite.

Il y a des fonctionnalités, des fonctionnalités vraiment simples, que les développeurs de navigateurs ne développent tout simplement pas.

IMHO, box-sizing: margin-boxétaient une fonctionnalité très utile. Une autre fonctionnalité utile était le box-sizing: padding-box, il existe au moins dans la norme, mais il n'a été implémenté dans aucun des principaux navigateurs. Pas même dans le dernier chrome!

Note: Commentaire de @Oriol: Firefox a implémenté box-sizing: padding-box. Mais d'autres non, et il a été retiré de la spécification. Firefox le supprimera dans la version 50. Triste.

Le gars en haut demande d'ajouter une marge à la largeur totale, y compris le rembourrage et la bordure. Le fait est que la marge est appliquée à l'extérieur de la boîte et que le remplissage et la bordure ne le sont pas lors de l'utilisation border-box.

J'ai essayé de réaliser l' border-marginidée. Ce que j'ai trouvé, c'est que si vous utilisez une marge, vous pouvez soit ajouter une classe de .lastau dernier élément (avec une marge, puis appliquer une marge de zéro, soit utiliser :last-child/:last-of-type). Ou ajoutez des marges égales tout autour (similaire à la version de remplissage ci-dessus).

Voir des exemples ici: http://codepen.io/mofeenster/pen/Anidc

border-boxcalcule la largeur de l'élément + son remplissage + sa bordure comme la largeur totale. Donc, si vous avez 2 divs qui ont une largeur de 50%, ils seront adjacents. Si vous leur ajoutez un 8pxrembourrage, vous aurez une gouttière de 16px. Combinez cela avec un élément enveloppant - qui a également un rembourrage de 8px- vous aurez une grille bien aménagée avec des gouttières égales tout autour.

Voir cet exemple ici: http://codepen.io/mofeenster/pen/vGgje

Cette dernière est ma méthode préférée.

Je suis sûr que tout cela est évident, mais je vais tout de même le taper parce que ... enfin, j'ai besoin de l'exercice. Le résultat suivant ne serait-il pas aussi efficace que box-sizing: margin-box;:

.col2 {
    width: 45%;
    height: 90%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

http://jsfiddle.net/Fg3hg/

box-sizingest utilisé pour contrôler à partir de quel point le remplissage et la bordure sont évalués par rapport à la taille globale de l'élément. Ainsi, même s'il n'est pas casher d'inclure des pxmarges avec une %largeur (comme c'est généralement toujours le cas), il est plus facile de calculer ce que le pourcentage relatif devrait être car vous n'avez pas à incorporer de remplissage et de bordures à la largeur définie.

En effet, l'attribut box-sizing fait référence à la taille d'un élément après le calcul des valeurs spécifiques à la dimension (remplissage, bordures). "box-sizing: border-box" définit la hauteur / largeur d'un élément et prend en compte le remplissage ainsi que la largeur de la bordure. La portée de la marge d'un élément est plus grande que l'élément lui-même, ce qui signifie qu'il modifie le flux de la page et de ses éléments environnants, modifiant ainsi directement la façon dont l'élément s'intègre dans son parent par rapport à ses éléments frères. En fin de compte, une valeur d'attribut "margin-box" poserait des problèmes majeurs et revient essentiellement à définir directement la hauteur / largeur des éléments.

Sur Codrops, il y a quelques bons articles sur le thème de l'effet des marges et des lignes forcées de déborder. Ils suggèrent d'utiliser l'unité rem ou em avec un normaliseur css définissant la taille de la police à 100% pour tous les navigateurs, puis lorsque vous définissez les largeurs et les marges, il est facile de suivre l'effet sur la largeur de la ligne en faisant simplement une note dans les commentaires pour la largeur totale. Une conversion de 16px en 1 em est le moyen de calculer le witdh total des fenêtres ciblées.

En travaillant comme ça pour la phase de développement au moins, puis si vous voulez des modèles `` réactifs '', vous pouvez convertir les largeurs en%, y compris les largeurs de marge.

L'autre façon souvent plus simple qu'ils suggèrent de manipuler les gouttières est d'utiliser le pseudo après et le content: '';sur chacune de vos colonnes qui, je trouve, fonctionne très bien. Si vous définissez une classe div qui est la dernière colonne définie telle que end, vous pouvez alors cibler cette classe pour ne pas avoir le pseudo après ou pour en avoir une plus large; qui convient le mieux à votre mise en page.

L'avantage supplémentaire de l'utilisation de cette méthode de pseudo-éléments est qu'elle vous donne également une cible pour les ombres qui peuvent également donner un effet plus 3D et une plus grande profondeur à l'image plate sur le moniteur du lecteur. J'expérimente cet effet en ce moment en augmentant les effets utilisés sur les boutons, en «ajustant» les dégradés et le z-index.

Les dimensions des éléments non remplacés au niveau du bloc dans un écoulement normal doivent satisfaire

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = largeur du bloc conteneur

Lorsqu'ils sont surcontraints, les navigateurs doivent ajuster la marge gauche ou droite. Je pense que cela signifie que la largeur de la zone de marge doit être égale à la largeur du bloc contenant (c'est-à-dire 100%).

Pour votre cas, les bordures transparentes box-sizing: border-boxpeuvent fonctionner un peu comme des marges .

Peut-être définir la bordure à 0% d'opacité en utilisant RGBA et utiliser la bordure comme marge.

Il existe une situation intéressante lors de l'utilisation de la taille de la boîte à l' intérieur du contenu du corps

aucun contenu aucune boîte de bordure ne donne aucune valeur sur la marge gauche-droite% recomptage de ces deux algoritms de recomptage de boîte

  .body{
    box-sizing: border-box;
    margin:0 3%;
  }

Les versions de Firefox antérieures à 57 prenaient également en charge la valeur padding-box pour le dimensionnement de la boîte, bien que cette valeur ait été supprimée de la spécification et des versions ultérieures du navigateur.

Donc margin-box même pas prévu ...