Taille de la boîte CSS3: margin-box; Pourquoi pas?
Pourquoi n'avons-nous pas box-sizing: margin-box;? D'habitude quand on met box-sizing: border-box; dans nos feuilles de style, nous entendons vraiment les anciennes.
Exemple:
Disons que j'ai une mise en page de 2 colonnes. Les deux colonnes ont une largeur de 50%, mais elles ont une apparence moche car il n'y a pas de gouttière (espace au milieu); Ci-dessous 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 se termine sur une nouvelle ligne, parce que ce qui suit est vrai:
50% + 50% + 24px > 100%
box-sizing: margin-box; résoudrait ce problème en incluant la marge dans la largeur calculée de l’élément. Je trouverais cela très utile, sinon plus utile que box-sizing: border-box;.
Ne pourriez-vous pas utiliser width: calc(50% - 24px); pour vos colonnes? Ensuite, définissez vos marges.
Je pense que nous pourrions avoir un box-sizing: margin-box. Le modèle de boîte de css montre exactement quelles sont les positions des marges des cadres.
Il y a des problèmes mineurs - par exemple, les zones de marge peuvent se chevaucher - mais ils ne sont pas difficiles à résoudre.
Je pense que la situation est la même, comme on peut le voir avec le overflow-x & overflow-y combinaisons, avec les divs absolut positionied dans les cellules de tableau, avec la combinaison de min | max-width | height avec la taille de la boîte, etc.
Il existe des fonctionnalités, des fonctionnalités très simples, que les développeurs de navigateurs ne développent tout simplement pas.
A MON HUMBLE AVIS, box-sizing: margin-box étaient une fonctionnalité très utile. Une autre caractéristique utile était le box-sizing: padding-box, il existe au moins dans la norme, mais n’a été implémenté dans aucun des principaux navigateurs. Pas même dans le nouveau chrome!
Note: Commentaire de @Oriol: Firefox a implémenté box-sizing: padding-box. Mais d'autres non, et il a été supprimé de la spécification. Firefox l'enlèvera à la version 50. Sad.
Le type 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 en dehors de la boîte et que le padding et la bordure ne le sont pas, lorsque vous utilisez border-box.
J'ai essayé d'atteindre le border-margin idée. Ce que j’ai trouvé, c’est que si vous utilisez margin, vous pouvez soit ajouter une classe de .last jusqu'au dernier élément (avec marge, appliquez une marge de zéro ou utilisez :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-box calcule la largeur de l'élément + son remplissage + sa bordure en tant que largeur totale. Donc si vous avez 2 divs qui ont 50% de largeur, ils seront adjacents. Si vous ajoutez 8px _ pour eux, vous aurez alors une gouttière de 16px. Combinez cela avec un élément de wrapping - qui a aussi un rembourrage de 8px - Vous aurez une grille bien agencée avec des gouttières égales tout autour.
Voir cet exemple ici: http://codepen.io/mofeenster/pen/vGgje
Ce dernier est ma méthode préférée.
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) données. "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. L'étendue de la marge d'un élément est supérieure à celle de 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 manière dont l'élément s'ajuste 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.
Je suis sûr que tout cela est évident, mais je vais quand même le taper parce que ... eh bien, 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;
}
box-sizing est utilisé pour contrôler à partir de quel point le remplissage et la bordure sont évalués en fonction de la taille globale de l'élément. Donc, bien que ce ne soit pas casher d'inclure px marges avec un % width (comme d'habitude, c'est toujours le cas), il est plus facile de calculer le pourcentage relatif car il n'est pas nécessaire d'incorporer des marges intérieures et des marges à la largeur définie.
Peut-être définir la bordure sur une opacité de 0% en utilisant RGBA et utiliser la bordure comme une marge.
Sur Codrops , il y a quelques bons articles sur l'effet des marges et des lignes forcées de déborder. Ils suggèrent d’utiliser l’unité rem ou em avec une taille de police de normalisateur définie sur 100% pour tous les navigateurs. Lorsque vous définissez des largeurs et des marges, il est facile de garder la trace de l’effet sur la largeur de la ligne en créant simplement une note dans les commentaires. la largeur totale. Une conversion de 16px en 1 em est le moyen de calculer le total des fenêtres ciblées.
Travailler 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, de manipuler les gouttières est d’utiliser le pseudo après et le content: ''; sur chacune de vos colonnes que 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 de manière à ne pas avoir le pseudo après ou à en avoir une plus large; lequel convient le mieux à votre mise en page.
L'avantage supplémentaire de cette méthode de pseudo-élément est qu'elle vous donne également une cible pour les ombres pouvant également donner un effet plus 3D et une plus grande profondeur à l'image à plat sur le moniteur du lecteur. J'expérimente actuellement cet effet en développant les effets utilisés sur les boutons, en "peaufinant" les dégradés et l'index z.
Les dimensions de éléments de niveau bloc, non remplacés dans un flux normal doivent satisfaire
margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = largeur du bloc conteneur
En cas de contrainte excessive, 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 conteneur (c'est-à-dire 100%).
Pour votre cas, bordures transparentes avec box-sizing: border-box peut fonctionner un peu comme les marges .
Il y a une situation intéressante lors de l'utilisation de taille de la boîte dans le contenu du corps
pas de contenu, aucune bordure ne donne aucune valeur sur la marge gauche-droite% de dépouillement de ces deux algorithmes de dépouillement
.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 ...