Neueste Web-Entwicklung Tutorials
 

CSS Höhe und Breite Abmessungen


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 .

Dieses <div> Element hat eine Höhe von 100 Pixeln und einer Breite von 500 Pixeln.

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:

Beispiel

div {
    width: 500px;
    height: 100px;
    border: 3px solid #73AD21;
}

Versuch es selber "


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!

Dieses <div> Element hat eine Höhe von 100 Pixeln und eine max-Breite von 500 Pixeln.

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:

Beispiel

div {
    max-width: 500px;
    height: 100px;
    border: 3px solid #73AD21;
}

Versuch es selber "


Beispiele

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!

Übung 1 » Übung 2»


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