Dimensionierung eines untergeordneten Elements relativ zum übergeordneten Rahmen

9

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

Hauptfrage

  

Gibt es eine Möglichkeit, die Breite eines untergeordneten Elements relativ zur   Eltern border-box anstatt der Eltern content-box ?

Bonusfrage

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?

    
NinGen ShinRa 13.09.2013, 04:50
quelle

2 Antworten

5

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.

    
SpliFF 13.09.2013 05:12
quelle
-1

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;

    
Andyba 15.11.2013 14:20
quelle

Tags und Links