Die CSS-Eigenschaften height
und width
werden zum Festlegen verwendet Höhe und Breite eines Elements.
Die CSS-Eigenschaft max-width
wird verwendet, um die maximale Breite eines Elements festzulegen.
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 50px;
width: 100%;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS height and width properties</h2>
<div>This div element has a height of 50 pixels and a width of 100%.</div>
</body>
</html>
Die Eigenschaften height
und width
werden zum Festlegen verwendet Höhe und Breite eines Elements.
Die Eigenschaften „Höhe“ und „Breite“ umfassen keine Abstände, Ränder oder Ränder. Es legt die Höhe/Breite des Bereichs innerhalb des Abstands, des Rands und des Rands von fest das Element.
Die Eigenschaften height
und width
kann folgende Werte haben:
auto
- Dies ist die Standardeinstellung. Der Browser berechnet die Höhe und Breite
length
- Definiert die Höhe/Breite in px, cm, usw.
%
- Definiert die Höhe/Breite in Prozent von der enthaltende Block
initial
- Setzt die Höhe/Breite auf ihren Wert Standardwert
inherit
- Die Höhe/Breite wird sein vom übergeordneten Wert geerbt
Legen Sie die Höhe und Breite eines <div>-Elements fest:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 200px and a width of 50%.</div>
</body>
</html>
Legen Sie die Höhe und Breite eines anderen <div>-Elements fest:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 100px and a width of 500px.</div>
</body>
</html>
Hinweis: Denken Sie daran, dass die Eigenschaften height
und width
keine Abstände und Ränder enthalten , oder Ränder! Sie legen die Höhe/Breite des Bereichs innerhalb der Polsterung, des Randes usw. fest. und Rand des Elements!
Die Eigenschaft max-width
wird verwendet, um die maximale Breite eines Elements festzulegen.
Die max-width
kann in Längenwerten wie px, cm usw. oder in Prozent (%) angegeben werden enthaltenden Block oder auf „Keine“ gesetzt (dies ist Standard. Bedeutet, dass es keine maximale Breite gibt).
Das Problem mit dem oben genannten <div>
tritt auf, wenn das Browserfenster kleiner als die Breite von ist das Element (500px). Der Browser fügt der Seite dann eine horizontale Bildlaufleiste hinzu.
Die Verwendung von max-width
verbessert in dieser Situation stattdessen die Handhabung kleiner Fenster durch den Browser.
Tipp: Ziehen Sie das Browserfenster auf eine Breite von weniger als 500 Pixeln, um den Unterschied zu sehen die beiden Divs!
Hinweis: Wenn Sie aus irgendeinem Grund beide verwenden width
-Eigenschaft und die max-width
-Eigenschaft für dasselbe Element und den Wert der Die Eigenschaft width
ist größer als die max-width
-Eigenschaft; Die Die Eigenschaft max-width
wird verwendet (und die Die Eigenschaft width
wird ignoriert.
Dieses <div>-Element hat eine Höhe von 100 Pixel und a maximale Breite von 500 Pixeln:
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>
<div>This div element has a height of 100px and a max-width of 500px.</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
Legen Sie die Höhe und Breite der Elemente fest
<!DOCTYPE html>
<html>
<head>
<style>
img.one {
height: auto;
}
img.two {
height: 200px;
width: 200px;
}
div.three {
height: 300px;
width: 300px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of elements</h2>
<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>
<p>Sized image (200x200 pixels):</p>
<img class="two" src="ocean.jpg" width="300" height="300"><br>
<p>The height and width of this div element is 300px:</p>
<div class="three"></div>
</body>
</html>
Dieses Beispiel zeigt, wie Sie die Höhe und Breite verschiedener Elemente festlegen.
Stellen Sie die Höhe und Breite eines Bildes in Prozent ein
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
}
img.one {
height: auto;
width: auto;
}
img.two {
height: 50%;
width: 50%;
}
</style>
</head>
<body>
<h2>Set the height and width in %</h2>
<p>Resize the browser window to see the effect.</p>
<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>
<p>Sized image (in %):</p>
<img class="two" src="ocean.jpg" width="300" height="300">
</body>
</html>
Dieses Beispiel zeigt, wie Sie die Höhe und Breite eines Bildes mithilfe eines Prozentwerts festlegen.
Legen Sie die minimale und maximale Breite eines Elements fest
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 400px;
min-width: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width and min-width of an element</h2>
<p>Resize the browser window to see the effect.</p>
<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>
</body>
</html>
Dieses Beispiel zeigt, wie Sie mithilfe eines Pixelwerts eine Mindestbreite und eine Maximalbreite eines Elements festlegen.
Legen Sie die minimale und maximale Höhe eines Elements fest
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-height: 600px;
min-height: 400px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-height and min-height of an element</h2>
<p>Resize the browser window to see the effect.</p>
<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>
</body>
</html>
Dieses Beispiel zeigt, wie Sie mithilfe eines Pixelwerts eine Mindesthöhe und eine Maximalhöhe eines Elements festlegen.
Legt die Höhe eines Elements fest
Legt die maximale Höhe eines Elements fest
Legt die maximale Breite eines Elements fest
Legt die Mindesthöhe eines Elements fest
Legt die Mindestbreite eines Elements fest
Legt die Breite eines Elements fest