Wenn ich die Größe eines untergeordneten Elements in Prozent festlege, wird die Größe relativ zu den Inhalten der Eltern berechnet. Box , unabhängig davon, dass ich die Eigenschaft box-sizing auf border-box gesetzt habe.
Wenn ich also so etwas habe:
%Vor% Die Breite von .child ist 50% von 400px (die Breite der Eltern nach dem Auffüllen). Sie können hier ein Beispiel sehen: JSBin
Gibt es eine Möglichkeit, die Breite eines untergeordneten Elements relativ zur Eltern
border-boxanstatt der Elterncontent-box?
Als ich mein Beispiel machte, bemerkte ich ein seltsames Verhalten bei der Berechnung der Größe. Wenn Sie das .parent Padding als 0 10% einstellen, erhalten Sie auf jeder Seite eine Auffüllung von 68 ungeraden Pixeln. Warum das? Ist nicht 10% von 600px 60px oder mir fehlt etwas?
Die width -Eigenschaft ist explizit als relativ zum Inhaltsfeld definiert und box-sizing auf dem übergeordneten Element ändert dies nicht, es ist jedoch ein Trick verfügbar. Was Sie brauchen, ist ein Rahmen, der keinen Platz einnimmt und glücklicherweise genau das ist die Eigenschaft outline .
Es gibt einen Haken: Die Gliederung ist standardmäßig außerhalb des Inhaltsfelds. Aber keine Sorge, denn eine von outline 's verwandten Eigenschaften outline-offset akzeptiert negative Werte, die unsere Gliederung in unsere Inhaltsbox bringen!
HTML
%Vor%CSS
%Vor%JS Bin: Ссылка
In Bezug auf Ihre "Bonusfrage" basieren die Prozentangaben auf der Containergröße, nicht auf der Elementgröße . Dies gilt für width , padding und margin . Sie erhalten eine Auffüllung von 68px, da der Container 680px groß ist. Das mag merkwürdig erscheinen, aber es ist sehr praktisch, wenn Sie eine Regel wie {width: 80%; padding: 10%;} haben, weil es garantiert, dass Ihre Gesamtdimension des Objekts 100% des Containers und nicht irgendein willkürlicher Wert basierend auf dem Inhalt Ihrer Kindelemente ist.
Hinweis: Bitte stellen Sie in Zukunft zusätzliche Fragen separat, insbesondere wenn diese nur geringfügig mit Ihrer Hauptfrage zusammenhängen.
Die Box-Sizing-Eigenschaft sollte auf dem untergeordneten Element festgelegt werden. Damit dies auch in Firefox funktioniert, sollten Sie das Präfix -moz angeben So:
%Vor%Antwort auf Bonus Frage:
Der Füllgrad wird basierend auf dem übergeordneten Element berechnet. Also, wenn in Ihrem Beispiel .parent innerhalb des Körpers ist. Die Polsterung beträgt 10% der Körperbreite;