Vlastnosti CSS height a width se používají k nastavení výška a šířka prvku.
Vlastnost CSS max-width se používá k nastavení maximální šířky prvku.
Zkuste to sami →
<!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>
Vlastnosti height a width se používají k nastavení výška a šířka prvku.
Vlastnosti výška a šířka nezahrnují odsazení, okraje ani okraje. Nastavuje výšku/šířku oblasti uvnitř výplně, ohraničení a okraj prvek.
Vlastnosti height a width může mít následující hodnoty:
auto - Toto je výchozí nastavení. Prohlížeč vypočítá výšku a šířku
délka - Definuje výšku/šířku v px, cm, atd.
% - Definuje výšku/šířku v procentech obsahující blok
počáteční - Nastaví výšku/šířku výchozí hodnota
zdědit - bude výška/šířka zděděno od své rodičovské hodnoty
Nastavte výšku a šířku prvku <div>:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}Zkuste to sami →
<!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>
Nastavte výšku a šířku dalšího prvku <div>:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}Zkuste to sami →
<!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>
Poznámka: Pamatujte, že vlastnosti height a width nezahrnují odsazení, ohraničení , nebo okraje! Nastavují výšku/šířku oblasti uvnitř vycpávky, ohraničení, a okraj prvku!
Vlastnost max-width se používá k nastavení maximální šířky prvku.
maximální šířku lze zadat v hodnotách délky, jako jsou px, cm atd., nebo v procentech (%) obsahující blok, nebo nastavený na žádný (toto je výchozí. Znamená, že neexistuje žádná maximální šířka).
K problému s <div> výše dochází, když je okno prohlížeče menší než šířka prvek (500px). Prohlížeč pak na stránku přidá vodorovný posuvník.
Použití max-width v této situaci zlepší práci prohlížeče s malými okny.
Tip: Přetáhněte okno prohlížeče na šířku menší než 500 pixelů, abyste viděli rozdíl mezi ty dva divy!
Poznámka: Pokud z nějakého důvodu používáte obě možnosti Vlastnost width a Vlastnost max-width na stejném prvku a hodnota Vlastnost width je větší než vlastnost vlastnost max-width; a Použije se vlastnost max-width (a Vlastnost width bude ignorována).
Tento prvek <div> má výšku 100 pixelů a a maximální šířka 500 pixelů:
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}Zkuste to sami →
<!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>
Nastavte výšku a šířku prvků
<!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>
Tento příklad ukazuje, jak nastavit výšku a šířku různých prvků.
Nastavte výšku a šířku obrázku pomocí procent
<!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>
Tento příklad ukazuje, jak nastavit výšku a šířku obrázku pomocí procentuální hodnoty.
Nastavte minimální a maximální šířku prvku
<!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>
Tento příklad ukazuje, jak nastavit minimální šířku a maximální šířku prvku pomocí hodnoty v pixelech.
Nastavte minimální výšku a maximální výšku prvku
<!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>
Tento příklad ukazuje, jak nastavit minimální výšku a maximální výšku prvku pomocí hodnoty v pixelech.
Nastavuje výšku prvku
Nastavuje maximální výšku prvku
Nastavuje maximální šířku prvku
Nastavuje minimální výšku prvku
Nastavuje minimální šířku prvku
Nastavuje šířku prvku