Warum beziehen sich CSS-Rand- und Füllprozentsätze auf die Breite und nicht auf die Höhe?

Warum Rand-/Padding-Prozentsätze in CSS an die Breite gebunden sind

Das CSS-Box-Modell definiert, dass Rand- und Padding-Prozentsätze anhand der Breite berechnet werden des enthaltenden Blocks. Dieses eigenartige Verhalten hat Fragen zu seiner Begründung aufgeworfen.

Hervorgehobener Auszug aus der CSS-Box-Modellspezifikation

"Der [Margin]-Prozentsatz wird in Bezug auf die Breite von berechnet Beachten Sie, dass dies für „margin-top“ und „margin-bottom“ gilt gut.“

Vermutung zur Begründung

Auswirkungen auf die Körpergröße der Eltern als begrenzender Faktor

Eine unbegründete Vermutung legt dies nahe Die Entscheidung könnte auf Bedenken hinsichtlich der Höhenberechnung zurückzuführen sein. Elementhöhen werden normalerweise durch die Größe ihrer untergeordneten Elemente definiert. Wenn padding-top als Prozentsatz relativ zur Höhe des übergeordneten Elements angewendet wird, wirkt sich dies auf die Höhe des übergeordneten Elements aus. Da jedoch die Größe des Kindes von der Größe des Elternteils abhängt und umgekehrt, entsteht eine Abhängigkeitsschleife oder eine ungenaue Größenberechnung.

Überlegungen zu verschachtelten Szenarios

Dies Bedenken sind besonders relevant in Fällen, in denen die Größe des Elternteils von der Größe des Kindes abhängt und die Größe des Kindes von der Größe des Elternteils abhängt (z. B. Offset-Elternteil === Elternteil). Das Lösen solcher Fälle wird aufgrund der Abhängigkeitsschleife oder der unendlichen Berechnung zu einer Herausforderung.

Beispiel

Bedenken Sie den folgenden Codeausschnitt:

<div>

Hier Beispielsweise wird der obere Rand des inneren Divs als 10 % der Breite des übergeordneten Divs (200 Pixel) berechnet, was zu a führt 20px Rand.

Das obige ist der detaillierte Inhalt vonWarum beziehen sich CSS-Rand- und Füllprozentsätze auf die Breite und nicht auf die Höhe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!