Verhalten der oberen, rechten, unteren, linken CSS-Werte bei Verwendung von 'px' vs '%'

Question

Bei der Verwendung von css Werte, warum kann ich manchmal Prozentsätze verwenden, aber manchmal muss ich Pixel verwenden (px), oder die element wird nicht antworten.

Zum Beispiel (auf einem bestimmten Element):

top: 25% - nicht

top: 150px reagiert - arbeitet

Ich werde in der Regel Prozentsätze über Pixel verwenden (px) zu halten Dinge anspricht, , aber warum funktionieren Prozentsätze (%) manchmal nicht? In welchen Szenarien funktionieren beide am besten? Vielen Dank.

Answer 1

Nach the WC3 specification für Prozenteinheiten (<percentage>^(ref)):

Prozentwerte sind auf einen anderen Wert immer relativ, beispielsweise eine Längeneinheit.

A Längeneinheit (<length>^(ref)) ist ein CSS-Datentyp, einen Entfernungswert darstellt, oder einen Wert definiert in relativen (em) oder absoluten (px) Längeneinheiten.

A Prozentsatz Einheit (<percentage>^(ref)) ist ein Datentyp, der CSS einen Prozentwert darstellt.

Prozenteinheiten (zB: top: 50%) auf geschachtelte Elemente verwendet wird nicht gelten, wenn das Aufnahmeelement keine Längeneinheit (zB: height: 200px) hat einen Wert definiert, da Prozentwerte auf einen anderen Wert immer relativ sind.
Dieses Verhalten kann im unten eingebetteten Codeausschnitt beobachtet werden.

Code Snippet Demonstration:

.fixed-height { 
 
    height: 200px; 
 
    background: #4cbd2f; 
 
} 
 

 
.auto-height { 
 
    background: #d04f38; 
 
} 
 

 
.nested { 
 
    top: 50%; 
 
    position: relative; 
 
} 
 

 
hr { 
 
    border: 2px dashed #d4d4d4; 
 
    margin: 25px 0px; 
 
} 
 

 
.fixed-height, .auto-height { 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    border: 2px dashed rgba(0, 0, 0, 0.3); 
 
}

<h3>Fixed Height</h3> 
 
<h4><code>height: 200px</code></h4> 
 
<div class="fixed-height"> 
 
    <div class="nested"><code>top: 50%</code></div> 
 
</div> 
 
<hr> 
 
<h3>Auto Height</h3> 
 
<h4><code>height: auto</code></h4> 
 
<div class="auto-height"> 
 
    <div class="nested"><code>top: 50%</code></div> 
 
</div>

im Codeausschnitt oben aufgezeigt, Prozentwerte auf Länge abhängig sein Werte. Obwohl beide verschachtelten Elemente eine top-Eigenschaft von 50% deklariert haben, wird nur das Element, das in dem enthaltenden Element verschachtelt ist, mit einer height -Eigenschaft, die explizit mit length definiert ist, zu dem erwarteten Verhalten führen.

Hinweis: Obwohl <percentage> Werte sind auch CSS Dimensionen und sind verwendbar in einigen der gleichen Eigenschaften, die <length> Werte annehmen, sie selbst nicht <length> Werte. ref

Hinweis: Nur berechneten Werte vererbt werden können. Selbst wenn ein Prozentwert für die Elterneigenschaft verwendet wird, ist ein realer Wert (z. B. eine Breite in Pixeln für einen <length>-Wert) auf die vererbte Eigenschaft und nicht auf den Prozentwert verfügbar.

Answer 2

Versuchen:

.example { 
    margin-top: 10px; 
    display:inline-block; 
} 

Dies behebt das Problem manchmal für mich. Sie müssen dies konfigurieren, um Ihre Bedürfnisse offensichtlich zu erfüllen, aber indem Sie display:inline-block hinzufügen, behebt es normalerweise das Problem.