A CSS height és width tulajdonságai a egy elem magassága és szélessége.
A CSS max-width tulajdonsága egy elem maximális szélességének beállítására szolgál.
Próbálja ki Ön is →
<!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>
A height és width tulajdonságok a egy elem magassága és szélessége.
A magasság és szélesség tulajdonságok nem tartalmazzák a kitöltést, a szegélyeket és a margókat. Beállítja a párnázáson, szegélyen és margón belüli terület magasságát/szélességét az elem.
A height és szélesség tulajdonságok a következő értékek lehetnek:
auto - Ez az alapértelmezett. A böngésző kiszámolja a magasságot és a szélességet
hosszúság - Meghatározza a magasságot/szélességet px-ben, cm-ben, stb.
% - Meghatározza a magasságot/szélességet százalékban a tartalmazó blokkot
kezdeti - a magasságot/szélességet a alapértelmezett érték
öröklés - A magasság/szélesség a következő lesz szülőértékéből örökölt
Állítsa be a <div> elem magasságát és szélességét:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}Próbálja ki Ön is →
<!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>
Állítsa be egy másik <div> elem magasságát és szélességét:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}Próbálja ki Ön is →
<!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>
Megjegyzés: Ne feledje, hogy a height és szélesség tulajdonságok nem tartalmazzák a kitöltést és a szegélyeket , vagy margók! Beállítják a párnázáson, szegélyen belüli terület magasságát/szélességét, és az elem margója!
A max-width tulajdonság egy elem maximális szélességének beállítására szolgál.
A max-width megadható hosszértékekben, például px, cm stb., vagy százalékban (%) amely blokkot tartalmaz, vagy nincs értékre állítva (ez az alapértelmezett. Azt jelenti, hogy nincs maximális szélesség).
A fenti <div> probléma akkor jelentkezik, ha a böngészőablak kisebb, mint a az elemet (500 képpont). A böngésző ezután vízszintes görgetősávot ad az oldalhoz.
A max-width használata ebben a helyzetben javítja a böngésző által a kis ablakok kezelését.
Tipp: Húzza a böngészőablakot 500 képpontnál kisebbre, hogy megtekinthesse a különbséget a két div!
Megjegyzés: Ha valamilyen okból mindkettőt használja width tulajdonság és a max-width tulajdonság ugyanazon az elemen, és az width tulajdonság nagyobb, mint a max-width tulajdonság; a max-width tulajdonság kerül felhasználásra (és a A rendszer figyelmen kívül hagyja a width tulajdonságot).
Ennek a <div> elemnek a magassága 100 pixel és a Maximum 500 pixel szélesség:
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}Próbálja ki Ön is →
<!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>
Állítsa be az elemek magasságát és szélességét
<!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>
Ez a példa bemutatja, hogyan kell beállítani a különböző elemek magasságát és szélességét.
Állítsa be a kép magasságát és szélességét százalékos értékkel
<!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>
Ez a példa bemutatja, hogyan állíthatja be a kép magasságát és szélességét százalékos érték használatával.
Állítsa be egy elem minimális és maximális szélességét
<!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>
Ez a példa bemutatja, hogyan lehet beállítani egy elem minimális és maximális szélességét pixelérték használatával.
Állítsa be egy elem minimális és maximális magasságát
<!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>
Ez a példa bemutatja, hogyan lehet beállítani egy elem minimális magasságát és maximális magasságát pixelérték használatával.
Beállítja egy elem magasságát
Beállítja az elem maximális magasságát
Beállítja az elem maximális szélességét
Beállítja az elem minimális magasságát
Beállítja az elem minimális szélességét
Beállítja az elem szélességét