CSS Bemaßungseigenschaften
Die CSS-Dimension Eigenschaften können Sie die Höhe und Breite eines Elements zu steuern.
Dieses Element hat eine Breite von 100%.
Einstellen der Höhe und Breite
Die height und width Eigenschaften werden verwendet , um die Höhe und die Breite eines Elements einzustellen.
Die height und width kann auf auto gesetzt werden (dies ist die Standardeinstellung. Bedeutet , dass der Browser die Höhe und Breite berechnet) oder in Längenwerte angegeben werden, wie px, cm , etc. oder in Prozent (%) des umschließenden Blocks .
Hinweis: Die height und width Eigenschaften beinhalten keine Polsterung, Grenzen oder Ränder; sie setzen die Höhe / Breite des Bereichs innerhalb der Polsterung, Rahmen und Rand des Elements!
Das folgende Beispiel zeigt ein <div> Element mit einer Höhe von 100 Pixeln und einer Breite von 500 Pixeln:
Einstellung max-width
Die max-width Eigenschaft ist die maximale Breite eines Elements eingestellt.
Die max-width kann in Längenwerte angegeben werden, wie px, cm , etc. oder in Prozent (%) des umschließenden Blocks oder auf keine (dies ist die Standardeinstellung. Bedeutet , dass es keine maximale Breite).
Das Problem mit dem <div> oben tritt auf, wenn das Browserfenster kleiner als die Breite des Elements (500px). Der Browser fügt dann eine horizontale Scrollbar auf die Seite.
Mit max-width statt, in dieser Situation wird der Browser des Umgang mit kleinen Fenstern zu verbessern.
Tipp: Ziehen Sie das Browserfenster kleiner als 500px breit, den Unterschied zwischen den beiden divs zu sehen!
Hinweis: Der Wert der max-width Eigenschaft überschreibt width .
Das folgende Beispiel zeigt ein <div> Element mit einer Höhe von 100 Pixeln und einer max-Breite von 500 Pixeln:
Probieren Sie es selbst - Beispiele
Stellen Sie die Höhe und Breite der Elemente
Dieses Beispiel zeigt, wie die Höhe und Breite der verschiedenen Elemente zu setzen.
Stellen Sie die Höhe und Breite eines Bildes unter Verwendung Prozent
Dieses Beispiel zeigt, wie die Höhe und Breite eines Bildes zu setzen einen prozentualen Wert verwenden.
Eingestellt min-width und max-Breite eines Elements
Dieses Beispiel zeigt, wie eine Mindestbreite einzustellen und eine maximale Breite eines Elements eines Pixelwerts verwendet wird.
Set min-height und max-height eines Elements
Dieses Beispiel zeigt, wie eine Mindesthöhe einzustellen und eine maximale Höhe eines Elements eines Pixelwerts verwendet wird.
Testen Sie sich mit Übungen!
Alle CSS Bemaßungseigenschaften
| Eigentum | Beschreibung |
|---|---|
| height | Legt die Höhe eines Elements |
| max-height | Legt die maximale Höhe eines Elements |
| max-width | Legt die maximale Breite eines Elements |
| min-height | Legt die minimale Höhe eines Elements |
| min-width | Legt die minimale Breite eines Elements |
| width | Legt die Breite eines Elements |