Warum haben wir nicht box-sizing: margin-box;
? Wenn wir box-sizing: border-box;
unsere Stylesheets einfügen, meinen wir normalerweise erstere.
Beispiel:
Angenommen, ich habe ein zweispaltiges Seitenlayout. Beide Säulen haben eine Breite von 50%, sehen aber irgendwie hässlich aus, weil es keine Rinne gibt (Lücke in der Mitte); Unten ist das CSS:
.col2 {
width: 50%;
float: left;
}
Um eine Dachrinne anzubringen, könnten Sie denken, wir könnten einfach einen rechten Rand für die erste der beiden Spalten festlegen. etwas wie das:
.col2:first-child {
margin-right: 24px;
}
Dies würde jedoch dazu führen, dass die zweite Spalte in eine neue Zeile umgebrochen wird, da Folgendes zutrifft:
50% + 50% + 24px > 100%
box-sizing: margin-box;
würde dieses Problem lösen, indem der Rand in die berechnete Breite des Elements aufgenommen wird. Ich würde dies sehr nützlich finden, wenn nicht nützlicher als box-sizing: border-box;
.
box-sizing: margin-box;
?" Denn während horizontale Ränder nicht kollabieren, würde ein solcher Vorschlag den Kollaps vertikaler Ränder ernsthaft beeinträchtigen. Wenn Sie etwas für die Standardisierung vorschlagen möchten, ist der Stapelüberlauf nicht der richtige Ort. Probieren Sie die Mailinglisten aus.border: xxx solid transparent;
, indem Sie den Rahmen in verwendenborder-box
. Dies wird jedoch einige andere Dinge zerstören, wie zbox-shadow
.box-sizing: margin-box
weil sie nicht mit einem Zusammenbruch der Margen funktionieren würde.Antworten:
Könnten Sie nicht
width: calc(50% - 24px);
für Ihre Cols verwenden? Stellen Sie dann Ihre Ränder ein.quelle
Ich denke wir könnten eine haben
box-sizing: margin-box
. Das CSS-Box-Modell zeigt genau, wie die Ränder der Frames positioniert sind.Es gibt kleinere Probleme - zum Beispiel können sich die Randfelder überlappen - aber sie sind nicht schwer zu lösen.
Ich denke, die Situation ist die gleiche, wie wir mit dem
overflow-x
& sehen könnenoverflow-y
-Kombinationen sehen können, bei den absolut positionierten Divs in Tabellenzellen, bei der Kombination von min | max-width | height mit der Box-Größe und so weiter.Es gibt Funktionen, wirklich einfache Funktionen, die die Browserentwickler einfach nicht entwickeln.
IMHO,
box-sizing: margin-box
waren eine sehr nützliche Funktion. Ein weiteres nützliches Feature war dasbox-sizing: padding-box
, es existiert zumindest im Standard, wurde aber in keinem der gängigen Browser implementiert. Nicht einmal im neuesten Chrom!Hinweis: @Oriols Kommentar: Firefox hat Box-Sizing: Padding-Box implementiert. Aber andere nicht, und es wurde aus der Spezifikation entfernt. Firefox wird es in Version 50 entfernen. Traurig.
quelle
box-sizing: padding-box
. Aber andere nicht, und es wurde aus der Spezifikation entfernt. Firefox wird es in Version 50 entfernen. Traurig.Der Typ oben fragt nach dem Hinzufügen eines Randes zur Gesamtbreite, einschließlich Polsterung und Rand. Die Sache ist, Rand wird außerhalb der Box angewendet und Polsterung und Rand sind nicht, wenn verwendet
border-box
.Ich habe versucht, die
border-margin
Idee zu erreichen . Ich habe festgestellt, dass Sie bei Verwendung von margin entweder.last
dem letzten Element eine Klasse von hinzufügen können (mit margin, dann einen Rand von Null anwenden oder verwenden):last-child/:last-of-type
). Oder fügen Sie rundum gleiche Ränder hinzu (ähnlich der obigen Polsterversion).Beispiele finden Sie hier: http://codepen.io/mofeenster/pen/Anidc
border-box
berechnet die Breite des Elements + seine Auffüllung + seinen Rand als Gesamtbreite. Wenn Sie also 2div
s haben, die 50% breit sind, sind sie benachbart. Wenn Sie8px
ihnen Polster hinzufügen , haben Sie eine Rinne von16px
. Kombinieren Sie dies mit einem Wickelelement - das auch gepolstert ist8px
- Sie erhalten ein schön angelegtes Gitter mit gleichmäßigen Rinnen ringsum.Sehen Sie dieses Beispiel hier: http://codepen.io/mofeenster/pen/vGgje
Letzteres ist meine Lieblingsmethode.
quelle
Ich bin mir sicher, dass dies alles offensichtlich ist, aber ich werde es trotzdem abtippen, weil ... nun, ich brauche die Übung. Wäre das folgende Ergebnis nicht genauso effizient wie
box-sizing: margin-box;
:http://jsfiddle.net/Fg3hg/
box-sizing
wird verwendet, um zu steuern, ab welchem Punkt die Polsterung und der Rand auf die Gesamtgröße des Elements bewertet werden. Obwohl es nicht koscher ist,px
Ränder mit einer%
Breite einzuschließen (wie dies normalerweise immer der Fall ist), ist es einfacher zu berechnen, wie hoch der relative Prozentsatz sein sollte, da Sie keine Auffüllungen und Ränder in die definierte Breite einfügen müssen.quelle
margin-box
mit mehrdimensionalen Randberechnungen umgehen?@media
Haltepunktemax-width
undmin-width
funktionieren einwandfrei. Ich denke, ichmargin-box
könnte etwas Aufblähen reduzieren, aber ich bekomme auch Gründe, warum es als überflüssig angesehen werden kann.Dies liegt daran, dass sich das Attribut "Box-Sizing" auf die Größe eines Elements bezieht, nachdem die angegebenen dimensionsspezifischen Werte (Auffüllen, Rahmen) berechnet wurden. "box-sizing: border-box" legt die Höhe / Breite eines Elements fest und berücksichtigt sowohl die Polsterung als auch die Rahmenbreite. Der Umfang des Randes eines Elements ist größer als der des Elements selbst. Dies bedeutet, dass der Seitenfluss und die umgebenden Elemente geändert werden und somit die Art und Weise, wie das Element in das übergeordnete Element passt, relativ zu den Geschwisterelementen direkt geändert wird. Letztendlich würde ein "Randfeld" -Attributwert große Probleme verursachen und entspricht im Wesentlichen dem direkten Einstellen der Höhe / Breite der Elemente.
quelle
Auf Codrops gibt es einige gute Artikel zum Thema der Auswirkung von Rändern und Zeilen, die zum Überlaufen gezwungen werden. Sie empfehlen, die Rem- oder Em-Einheit mit einem Normalisierer-CSS zu verwenden, der die Schriftgröße für alle Browser auf 100% einstellt. Wenn Sie dann Breiten und Ränder festlegen, können Sie den Effekt auf die Zeilenbreite leicht verfolgen, indem Sie einfach in den Kommentaren für eine Notiz für machen die Gesamtbreite. Eine Konvertierung von 16px in 1 em ist der Weg, um die Gesamtanzahl der Zielansichtsfenster mit zu berechnen.
Arbeiten Sie zumindest für die Entwicklungsphase so. Wenn Sie dann reaktionsschnelle Vorlagen wünschen, können Sie die Breiten einschließlich der Randbreiten in% konvertieren.
Die andere und oft einfachere Art, mit Dachrinnen umzugehen, besteht darin, das Pseudo-After und das
content: '';
auf jeder Ihrer Spalten zu verwenden, was meiner Meinung nach sehr gut funktioniert. Wenn Sie eine div-Klasse festlegen, die die definierte letzte Spalte ist, z. B. end, können Sie darauf abzielen, dass diese Klasse kein Pseudo nach oder eine breitere hat. was immer am besten zu Ihrem Layout passt.Der zusätzliche Vorteil dieser Pseudo-Element-Methode besteht darin, dass Sie auch ein Ziel für Schatten erhalten, die dem flachen Bild auf dem Lesemonitor einen 3D-Effekt und eine größere Tiefe verleihen können. Ich experimentiere gerade mit diesem Effekt, indem ich die auf Schaltflächen verwendeten Effekte vergrößere, die Verläufe und den Z-Index 'optimiere'.
quelle
Die Abmessungen von nicht ersetzten Elementen auf Blockebene im normalen Durchfluss müssen übereinstimmen
Bei übermäßigen Einschränkungen müssen Browser entweder den linken oder den rechten Rand anpassen. Ich glaube, bedeutet die Breite des Randfeld muss die Breite des umschließenden Blocks gleich sind (dh 100%).
In Ihrem Fall können transparente Ränder mit
box-sizing: border-box
ähnlich wie Ränder funktionieren .quelle
Stellen Sie den Rand möglicherweise mit RGBA auf 0% Deckkraft ein und verwenden Sie den Rand als Rand.
quelle
1px
auseinander haben möchte , von denen jede den50%
verfügbaren Platz einnimmt? Genau dasmargin-box
würde tun. Oder vergessen Sie die Randbox und denken Sie über den verfügbaren Platz nach. Nicht 50% des übergeordneten Containers, sondern 50% der verbleibenden Teile. Kein "calc", kein "5% margin", kein solches Durcheinander ...Es gibt eine interessante Situation bei der Verwendung von Box-Sizing innerhalb des Körperinhalts
Kein Inhalt Kein Rahmenfeld gibt keinen Wert für den linken / rechten Rand an.% Nachzählung dieser beiden Box-Nachzählungsalgorithmen
Also Margin-Box auch nicht geplant ...
quelle