Warum zeigt Box-Sizing: border-box immer noch die Grenze mit einer Breite von 0px?

Bei Verwendung von Box-Sizing: border-box in CSS gehe ich davon aus, dass die Gesamtbreite eines Elements in seinem "width" -Wert definiert wird. Wenn ich also sage, dass die Breite einer Division 20px und die rechte Grenze 10px ist, werde ich mit einer Box enden, die den Platz von 20px einnimmt und die Hälfte davon ist die rechte Grenze. Schieben sie bis zu dem Punkt, wo ich die Breite auf 10px und die rechte Grenze, auch, wie hier:Warum zeigt Box-Sizing: border-box immer noch die Grenze mit einer Breite von 0px?

#box{ 
    overflow: hidden; 
    width: 10px; 
    box-sizing: border-box; 
    height: 100px; 
    background: black; 
    border-right: 10px solid red; 
}

die Box wird nur von der roten Umrandung bestehen. Was soll passieren, wenn ich die Breite auf 0px setze? Ich dachte, es würde die ganze Sache verschwinden lassen, aber nein, das Ergebnis ist genau das gleiche wie das obige:

Meine Frage ist, ob dies das erwartete Verhalten ist. Scheint mir widersprüchlich. Ich möchte eine Box verschwinden lassen und nur die Breite/Höhe manipulieren. Danke für jede Eingabe.

Quelle

2012-06-21 Seka

Welchen Browser benutzen Sie? Nicht alle Browser unterstützen Box-Sizing direkt. Einige haben ihr eigenes, proprietäres Box-Sizing wie "-moz-box-sizing" und "-webkit-box-sizing". Wenn du etwas verschwinden lassen willst, benutze 'display: none;' oder 'visibility: hidden;' – Jrod

Ich könnte auch einen Hammer benutzen, um ein Ei zu brechen ... aber ich versuche es nicht :) Einfach nur Spaß, ich wirklich brauche das Element, um so zu verschwinden ... denk an einen Schlitz ... – Seka

Du meinst irgendeine Art von Animation, bei der du langsam die Breite auf Null reduzierst? Nicht genau, was du mit einem Schlitz meinst. Wenn Sie genauer ausführen könnten, was Sie erreichen wollen, gibt es vielleicht eine andere, geeignetere Lösung. Wie bei den meisten Dingen gibt es viele Möglichkeiten, dies zu tun. Vielleicht ist ein Klauenhammer eine schlechte Wahl, aber vielleicht ist ein reißender Hammer genau das Richtige für dich. – Jrod

Der Inhaltsbereich ist alles, was übrig bleibt, nachdem Sie die Breite des Rahmens subtrahiert haben.

Der Inhalt Breite und Höhe werden durch Subtrahieren der Grenze und padding Breiten der jeweiligen Seiten von der angegebenen ‚width‘ und ‚height‘ Eigenschaften berechnet.

Spezifizierte width = 10 px
Randbreite = 10 px
Inhalt width = Angegebene Breite (10 px) - Rahmenbreite (10 px)
Inhalt Breite 10 - 10 = 0

Spezifizierte width = 0 px
Randbreite = 10 px
Inhalt width = angegebene Breite (0 px) - Rahmenbreite (10 px)
Inhalt Breite 0 - 10 = -10 (die den 10 px von der Grenze verwendet würden entfernen)

Aber

als Inhalts Breite und Höhe kann nicht negativ sein ([CSS21], Abschnitt 10.2), wird diese Berechnung auf 0

platt

Spezifizierte width = 0 px
Rahmenbreite = 10 px
Inhalt width = Angegebene Breite (0 px) - Rahmenbreite (10 px)
Inhalt width 0 - 10 = 0 (entfernt nicht die vom Rahmen verwendeten 10 px

)

Wenn Sie nicht wollen, display:none; oder visibility:hidden; verwenden, müssen Sie setzen sowohl die width:XX; und die border-right:XX; auf Null.

Quelle

2012-06-21 16:52:45 codewaggle

Danke für die Antwort; Der Schlüssel war zu verstehen, dass die Grenze aufgrund des negativen Ergebnisses bleibt, denke ich. Glauben Sie aber, dass es sich um ein konsequentes Verhalten handelt? Ich frage mich, ob sich in diesem letzten Fall die border-box und die content-box genau so verhalten, was mir gerade so kontraintuitiv erscheint. Was denken Sie? – Seka

Ich stimme zu, das Problem ist, dass Sie keine negativen Blöcke zulassen können, also haben sie sich entschieden, damit umzugehen. Ich kann mir keine bessere Alternative vorstellen. – codewaggle

So entsteht ein Dreieck! https://css-tricks.com/examples/ShapesOfCSS/ –

Werfen Sie einen Blick auf diesen Screenshot:

box metrics

Das gesamte Feld ist 100x100px wie man erwarten würde, aber die tatsächliche Breite ist 90px + 10px rechten Rand. Wenn Sie also die Breite auf 0 setzen, ist die Breite immer noch 0 (kann keine negative Breite haben), aber Sie haben immer noch den 10px-Rahmen.

Quelle

2012-06-21 16:16:54 sachleen

Aber warum hast du immer noch die Grenze? Denn nach den Spezifikationen sollte es nicht dort sein: "Die Breite und Höhe des Inhalts werden berechnet, indem die Rand- und Auffüllbreiten der jeweiligen Seiten von den angegebenen Eigenschaften" Breite "und" Höhe "subtrahiert werden, da die Breite und Höhe des Inhalts nicht negativ sein können ([CSS21], Abschnitt 10.2), diese Berechnung ist auf 0 gesetzt. " [siehe border-box] (http://www.w3.org/TR/css3-ui/#box-sizing0) – Seka

Das ist was passiert. Die Inhaltsbreite (Breite ohne Ränder oder Auffüllen) ist 0, da nach dem Subtrahieren von Rändern und Auffüllen eine negative Breite verbleibt. Zu beachten ist, wie Sie "Inhalt" definieren. – sachleen

... also sollte die gesamte 'Breite' des Elements auf 0 gesetzt werden, richtig? Wenn ich Breite 10px und Rand rechts 10px definiere, bekomme ich eine Box von 10px, ich sollte eine Box von 0px bekommen, wenn ich die Breite auf 0px definiere, richtig? Ich zitiere Paul Irish: "Ugh. Wenn ich sage, dass die Breite 200px [0px] ist, verflucht es, wird es eine 200px [0px] breite Box sein, auch wenn ich 20px padding [border] habe." [* {box-sizing: border-box} FTW] (http://paulirish.com/2012/box-sizing-border-box-ftw/) – Seka

Warum zeigt Box-Sizing: border-box immer noch die Grenze mit einer Breite von 0px?

Antwort

Verwandte Themen