CSS -Höhe und -Breite
Das CSS heightund widthdie Eigenschaften werden verwendet, um die Höhe und Breite eines Elements festzulegen.
Die CSS max-width-Eigenschaft wird verwendet, um die maximale Breite eines Elements festzulegen.
CSS Einstellung von Höhe und Breite
Die Eigenschaften heightund widthwerden verwendet, um die Höhe und Breite eines Elements festzulegen.
Die Höhen- und Breiteneigenschaften enthalten keine Auffüllung, Rahmen oder Ränder. Es legt die Höhe/Breite des Bereichs innerhalb der Polsterung, des Rahmens und des Rands des Elements fest.
CSS-Werte für Höhe und Breite
Die Eigenschaften heightund widthkönnen die folgenden Werte haben:
auto- Dies ist die Standardeinstellung. Der Browser berechnet die Höhe und Breitelength- Definiert die Höhe/Breite in px, cm etc.%- Definiert die Höhe/Breite in Prozent des umgebenden Blocksinitial- Setzt die Höhe/Breite auf den Standardwertinherit- Die Höhe/Breite wird vom übergeordneten Wert geerbt
Beispiele für CSS-Höhe und -Breite
Beispiel
Legen Sie die Höhe und Breite eines <div>-Elements fest:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
Beispiel
Legen Sie die Höhe und Breite eines anderen <div>-Elements fest:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
Hinweis: Denken Sie daran, dass die Eigenschaften heightund widthkeine Auffüllung, Rahmen oder Ränder enthalten! Sie legen die Höhe/Breite des Bereichs innerhalb der Polsterung, des Rahmens und des Rands des Elements fest!
Max-Breite einstellen
Die max-widthEigenschaft wird verwendet, um die maximale Breite eines Elements festzulegen.
max-widthSie können in Längenwerten wie px, cm usw. oder in Prozent (%) des umgebenden Blocks angegeben oder auf „none“ gesetzt werden (dies ist die Standardeinstellung. Bedeutet, dass es keine maximale Breite gibt) .
Das <div>oben genannte Problem tritt auf, wenn das Browserfenster kleiner als die Breite des Elements (500 Pixel) ist. Der Browser fügt der Seite dann eine horizontale Bildlaufleiste hinzu.
Wenn Sie max-widthstattdessen in dieser Situation verwenden, verbessert der Browser die Handhabung kleiner Fenster.
Tipp: Ziehen Sie das Browserfenster auf eine Breite von weniger als 500 Pixel, um den Unterschied zwischen den beiden Divs zu sehen!
Hinweis: Wenn Sie aus irgendeinem Grund sowohl die
widthEigenschaft als auch die
max-widthEigenschaft für dasselbe Element verwenden und der Wert der
widthEigenschaft größer als die
max-widthEigenschaft ist; die
max-widthEigenschaft wird verwendet (und die
widthEigenschaft wird ignoriert).
Beispiel
Dieses <div>-Element hat eine Höhe von 100 Pixel und eine maximale Breite von 500 Pixel:
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}
Probieren Sie es selbst aus - Beispiele
festlegen Dieses Beispiel zeigt, wie Sie die Höhe und Breite verschiedener Elemente festlegen.
Dieses Beispiel zeigt, wie Sie die Höhe und Breite eines Bilds mithilfe eines Prozentwerts festlegen.
eines Elements festlegen Dieses Beispiel zeigt, wie Sie eine Mindestbreite und eine Höchstbreite eines Elements mithilfe eines Pixelwerts festlegen.
eines Elements festlegen Dieses Beispiel zeigt, wie Sie mithilfe eines Pixelwerts eine Mindesthöhe und eine Höchsthöhe eines Elements festlegen.
Alle CSS-Dimensionseigenschaften
| Property | Description |
|---|---|
| height | Sets the height of an element |
| max-height | Sets the maximum height of an element |
| max-width | Sets the maximum width of an element |
| min-height | Sets the minimum height of an element |
| min-width | Sets the minimum width of an element |
| width | Sets the width of an element |