CSS3-Box-Größe: Rand-Box; Warum nicht?

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;.

Könnten Sie nicht width: calc(50% - 24px);für Ihre Cols verwenden? Stellen Sie dann Ihre Ränder ein.

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-boxwaren eine sehr nützliche Funktion. Ein weiteres nützliches Feature war das box-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.

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-marginIdee zu erreichen . Ich habe festgestellt, dass Sie bei Verwendung von margin entweder .lastdem 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-boxberechnet die Breite des Elements + seine Auffüllung + seinen Rand als Gesamtbreite. Wenn Sie also 2 divs haben, die 50% breit sind, sind sie benachbart. Wenn Sie 8pxihnen Polster hinzufügen , haben Sie eine Rinne von 16px. Kombinieren Sie dies mit einem Wickelelement - das auch gepolstert ist 8px- 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.

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;:

.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-sizingwird 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, pxRä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.

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.

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'.

Die Abmessungen von nicht ersetzten Elementen auf Blockebene im normalen Durchfluss müssen übereinstimmen

Rand-links + Rand-links-Breite + Auffüllen-links + Breite + Auffüllen-rechts + Rand-rechts-Breite + Rand-rechts = Breite des enthaltenen Blocks

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 .

Stellen Sie den Rand möglicherweise mit RGBA auf 0% Deckkraft ein und verwenden Sie den Rand als Rand.

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

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

Firefox-Versionen vor 57 unterstützten auch den Padding-Box-Wert für die Box-Größe, obwohl dieser Wert aus der Spezifikation und späteren Versionen des Browsers entfernt wurde.

Also Margin-Box auch nicht geplant ...