Max-Breite (CSS-Eigenschaft)

Beschreibung

Diese Eigenschaft legt die maximale Inhaltsbreite eines Blocks oder eines ersetzten Elements fest. Diese maximale Breite umfasst keine Polsterung, Grenzen oder Ränder.

Ein Element, auf das eine maximale Breite angewendet wird, wird niemals breiter sein als der angegebene Wert, selbst wenn die Breiteneigenschaft so eingestellt ist, dass sie breiter ist. Es gibt jedoch eine Ausnahme zu dieser Regel: Wenn die Min-Breite mit einem höheren Wert als maximaler Breite angegeben ist, ist die Breite des Containers der größte Wert, was in diesem Fall bedeutet, dass der Wert von Min-Breite der angewendet wird.

.

max-Width wird häufig in Verbindung mit Minwidth verwendet, um einen Breitenbereich für das betreffende Element zu erzeugen.

kombiniert Max-Breite und Breite

Beachten Sie, dass maximale Breite und Breite nicht mit derselben Einheit auf dasselbe Element angewendet werden sollten, da einer die andere überschreibt. Wenn beispielsweise die Breite auf 150px eingestellt ist und die maximale Breite auf 60px eingestellt ist, beträgt die tatsächliche Breite des Elements 60px und die Breite der Breite wird überflüssig.

Die folgende Stilregel zeigt, wie Konflikte gelöst werden, wenn einem Element sowohl eine Breite als auch eine maximale Breite mit derselben Einheit (in diesem Fall Pixel) gegeben wurde:

.example {
  max-width: 60px;
  width: 150px;
}

Im obigen Beispiel wird die Breite des Elements auf 60px festgelegt.

Es ist jedoch akzeptabel, maximale Breite und Breite festzulegen, wenn die Werte unterschiedliche Einheiten sind (obwohl es möglicherweise nicht ganz nützlich ist, gibt es einige Fälle, in denen es zur guten Wirkung verwendet werden kann).

Diese Stilregel weist Bildern mit der Klasse „Beispiel“ eine maximale Breite von 160px zu und weist auch eine Breite von 50%zu:

img.example {
  width: 50%;
  max-width: 160px;
  height: auto;
}

Die endgültige Breite des Bildes im obigen Beispiel ist der kleinste Wert.

Wenn ein Bild skaliert werden soll, wenn die Seitenbreite klein ist, so dass das Bild nicht aus seiner Spalte ausbricht, können Sie das obige Beispiel verwenden, um sicherzustellen, dass die Größe des Bildes abnimmt, sobald der verfügbare Platz weniger als 160 Pixel beträgt.

Wenn der verfügbare Platz größer als 160 Pixel ist, erweitert das Bild bis er 160 Pixel breit ist - aber nicht weiter. Dies stellt sicher, dass das Bild an einer vernünftigen Größe oder seinem korrekten Seitenverhältnis bleibt, wenn der Platz zulässt.

Die Eigenschaft von Minwidth kann für die Rückseite dieses Szenarios verwendet werden.

Wenn der Inhalt eines Blocks mehr horizontalen Raum erfordert, als durch die festgelegten Grenzen zulässig ist, wird das Verhalten durch die Überlaufeigenschaft definiert.

Beispiel

Diese Stilregel weist eine maximale Breite von 400 Pixel und eine minimale Breite von 100 Pixel für Absätze innerhalb des Elements mit iD "Beispiel":

#example p {
  max-width: 400px;
  min-width: 100px;
}

zu

Wert

Die Eigenschaft übernimmt eine CSS -Länge (PX, PT, EM usw.), einen Prozentsatz oder das Schlüsselwort None. Negative Längenwerte sind illegal.

Prozentsatzwerte beziehen sich auf die Breite des enthaltenen Blocks. Wenn die Breite des Blocks negativ ist, ist der verwendete Wert keine.

häufig gestellte Fragen (FAQs) zu CSS Max-Width-Eigenschaft

Was ist der Unterschied zwischen der Breite und der maximalen Breite in CSS? Wenn der Inhalt in einem Element größer ist als die festgelegte maximale Breite, passt er automatisch auf den Wert der maximalen Breite an. Wenn der Inhalt jedoch kleiner ist, schrumpft das Element auf den Inhalt, im Gegensatz zur Breite, die die festgelegte Breite unabhängig von der Inhaltsgröße beibehält. Es ermöglicht eine Webseite, ihr Layout basierend auf der Größe des Gerätebildschirms anzupassen. Wenn Sie eine maximale Breite festlegen, stellen Sie sicher, dass sich der Inhalt auf größeren Bildschirmen nicht über einen bestimmten Punkt hinaus erstreckt und die Lesbarkeit und die Integrität des Designs beibehält. Auf kleineren Bildschirmen wird der Inhalt an die Bildschirmgröße angepasst.

Kann ich Prozentwerte mit maximaler Breite verwenden? Der Prozentsatz ist relativ zur Breite des übergeordneten Elements. Wenn Sie beispielsweise die maximale Breite eines Elements auf 50%festlegen, dauert es bis zu der Hälfte der Breite des übergeordneten Elements. Wenn beispielsweise die Breite auf 500px eingestellt ist und die maximale Breite auf 400px eingestellt ist, verwendet der Browser den 400px-Wert. Wenn die maximale Breite jedoch kleiner als die Min-Breite ist, wird der Minwidth-Wert verwendet. Dies stellt sicher, dass das Element nicht kleiner als die angegebene minimale Breite wird. Es gilt nicht für Inline-Elemente oder für Tabellenzeilen und Zeilengruppen.

Wie funktioniert max-Breite mit Bildern? Dies ist besonders nützlich für das reaktionsschnelle Design, bei dem die Bildgröße basierend auf der Bildschirmgröße anpassen muss. Dies liegt daran, dass CSS eine höhere Spezifität als html aufweist.

Welche Einheiten können mit maximaler Breite verwendet werden? Jede Einheit hat einen eigenen Anwendungsfall und kann basierend auf den spezifischen Anforderungen Ihres Designs verwendet werden.

Das obige ist der detaillierte Inhalt vonMax-Breite (CSS-Eigenschaft). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!