CSS:n height- ja width-ominaisuuksia käytetään asettamaan elementin korkeus ja leveys.
CSS-ominaisuutta max-width käytetään elementin enimmäisleveyden asettamiseen.
Kokeile itse →
<!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>
Ominaisuuksia height ja width käytetään asettamaan elementin korkeus ja leveys.
Korkeus- ja leveysominaisuudet eivät sisällä täyttöä, reunuksia tai marginaaleja. Se määrittää täytteen, reunuksen ja marginaalin sisällä olevan alueen korkeuden/leveyden elementti.
Ominaisuudet korkeus ja leveys voi olla seuraavat arvot:
auto - Tämä on oletusarvo. Selain laskee korkeuden ja leveyden
pituus - määrittää korkeuden/leveyden pikselinä, cm, jne.
% - Määrittää korkeuden/leveyden prosentteina sisältävä lohko
alkuperäinen - Asettaa korkeuden/leveyden oletusarvo
peri - Korkeus/leveys on peritty sen emoarvosta
Aseta <div>-elementin korkeus ja leveys:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}Kokeile itse →
<!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>
Aseta toisen <div>-elementin korkeus ja leveys:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}Kokeile itse →
<!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>
Huomaa: Muista, että height- ja width-ominaisuudet eivät sisällä täyttöä tai reunuksia , tai marginaaleja! Ne määrittävät pehmusteen sisällä olevan alueen korkeuden/leveyden, reunuksen, ja elementin marginaali!
Ominaisuutta max-width käytetään elementin enimmäisleveyden asettamiseen.
max-width voidaan määrittää pituusarvoina, kuten px, cm jne., tai prosentteina (%) sisältää lohkon tai aseta arvoksi ei mitään (tämä on oletuksena. Tarkoittaa, että enimmäisleveyttä ei ole).
Ongelma yllä olevan <div> kanssa ilmenee, kun selainikkuna on pienempi kuin elementti (500px). Selain lisää sitten sivulle vaakasuuntaisen vierityspalkin.
Sen sijaan max-width:n käyttäminen tässä tilanteessa parantaa selaimen pienten ikkunoiden käsittelyä.
Vinkki: Vedä selainikkuna alle 500 pikseliä leveäksi nähdäksesi eron kaksi diviä!
Huomaa: jos käytät jostain syystä molempia width-ominaisuus ja max-width-ominaisuus samassa elementissä ja width-ominaisuus on suurempi kuin max-width -ominaisuus; the max-width-ominaisuutta käytetään (ja width-ominaisuus ohitetaan).
Tämän <div>-elementin korkeus on 100 pikseliä ja a enimmäisleveys 500 pikseliä:
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}Kokeile itse →
<!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>
Aseta elementtien korkeus ja leveys
<!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>
Tämä esimerkki osoittaa, kuinka eri elementtien korkeus ja leveys asetetaan.
Aseta kuvan korkeus ja leveys prosentteina
<!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>
Tämä esimerkki osoittaa, kuinka kuvan korkeus ja leveys asetetaan prosenttiarvon avulla.
Aseta elementin minimi- ja enimmäisleveys
<!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>
Tämä esimerkki osoittaa, kuinka elementin vähimmäisleveys ja enimmäisleveys asetetaan pikseliarvon avulla.
Aseta elementin minimi- ja maksimikorkeus
<!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>
Tämä esimerkki osoittaa, kuinka elementin vähimmäis- ja enimmäiskorkeus asetetaan pikseliarvon avulla.
Asettaa elementin korkeuden
Asettaa elementin enimmäiskorkeuden
Asettaa elementin suurimman leveyden
Asettaa elementin vähimmäiskorkeuden
Asettaa elementin vähimmäisleveyden
Asettaa elementin leveyden