Īn?l?imea ?i l??imea in CSS
CSS Tutorial » Īn?l?imea ?i l??imea in CSS
Cum se aplic? īn?l?imea ?i l??imea īn CSS defini?ia.
Proprietatea l??ime ?i īn?l?ime define?te l??imea ?i īn?l?imea zonei de con?inut a unui element. Aceast? l??ime ?i īn?l?ime nu include umplutura, marginile sau marginile.
CSS are mai multe propriet??i de dimensiuni, cum ar fi: l??ime - l??ime, īn?l?ime - īn?l?ime, l??ime maxim? - l??ime maxim?, l??ime minim? - l??ime minim?, īn?l?ime maxim? - īn?l?ime maxim? ?i īn?l?ime minim? - īn?l?ime minim? care v? permit s? controla?i l??imea ?i īn?l?imea unui element. Urm?toarele sec?iuni descriu cum s? utiliza?i aceste propriet??i pentru a crea un aspect mai bun al paginii web.
Propriet??ile de īn?l?ime ?i l??ime pot avea urm?toarele valori:
- auto - Aceasta este implicit?. Browserul calculeaz? īn?l?imea ?i l??imea
- length - Define?te īn?l?imea / l??imea īn px, cm, etc.
- % - Define?te īn?l?imea / l??imea īn procente din blocul containerului
- initial - Seteaz? īn?l?imea / l??imea la valoarea implicit?
- inherit - Īn?l?imea / l??imea este mo?tenit? de valoarea sa principal?
Īn?l?imea ?i l??imea CSS
Proprietatea l??ime ?i īn?l?ime define?te l??imea ?i īn?l?imea zonei de con?inut a unui element. Aceast? l??ime ?i īn?l?ime nu include umplutura, marginile sau marginile.
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>CSS seteaz? l??imea ?i īn?l?imea unui element</title>
<style>
div {
width: 310px;
height: 210px;
background-color: #9FC;
}
</style>
</head>
<body>
<div>Joac?-te cu valorile pentru a vedea cum func?ioneaz?!</div>
</body>
</html>
Regulile de stil de mai sus atribuie elementului o l??ime fix? ??de 310 pixeli ?i o īn?l?ime de 210 pixeli <div>.
Etichete: CSS īn?l?ime ?i l??ime, īn?l?ime ?i l??ime, stil, cum se aplic? īn?l?imea ?i l??imea īn CSS, care este l??imea ?i īn?l?imea īn CSS
Setarea l??imii ?i īn?l?imii maxime
Pute?i utiliza proprietatea l??ime maxim? ?i īn?l?ime maxim? pentru a specifica l??imea ?i īn?l?imea maxim? a zonei de con?inut.
Aceast? l??ime ?i īn?l?ime maxim? nu include umplutura, marginile sau marginile.
Un element nu poate fi mai lat decāt valoarea l??imii maxime, chiar dac? proprietatea l??imii este setat? la ceva mai mare. De exemplu, dac? l??imea este setat? la 350 px ?i l??imea maxim? este setat? la 290 px, l??imea real? a elementului va fi de 290 px. Similar īn īn?l?ime. S? vedem un exemplu:
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>CSS Seteaz? l??imea maxim? a unui element</title>
<style>
pre {
width: 350px;
background-color: #9F9;
}
div {
width: 350px;
max-width: 250px;
background: #bbb3ff;
}
p {
float: left;
max-width: 400px;
background: #eee8aa;
}
</style>
</head>
<body>
<pre>aceast? cutie verde are 350 px</pre>
<div>L??imea maxim? a acestui element div este setat? la 250 px, deci nu poate fi mai mare decāt aceasta.</div>
<p>Introduce?i un text pentru a vedea cum func?ioneaz?.</p>
</body>
</html>
Set?ri minime de l??ime ?i īn?l?ime
Pute?i utiliza proprietatea min-l??ime ?i min-īn?l?ime pentru a specifica l??imea ?i īn?l?imea minim? a zonei de con?inut. Aceast? l??ime ?i īn?l?ime minime nu include umplutura, marginile sau marginile.
Un element nu poate fi mai īngust decāt valoarea l??imii minime, chiar dac? proprietatea l??imii este setat? la ceva mai mic. De exemplu, dac? l??imea este setat? la 300 px ?i l??imea minim? este setat? la 400 px, l??imea real? a elementului va fi de 400 px. S? vedem cum func?ioneaz? cu adev?rat:
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>CSS seteaz? l??imea minim? a unui element</title>
<style>
pre {
width: 300px;
background-color: #9F9;
}
div {
width: 100px;
min-width: 350px;
background: #bbb3ff;
}
p {
float: left;
min-width: 400px;
background: #eee8aa;
}
</style>
</head>
<body>
<h2>CSS seteaz? l??imea minim? a unui element</h2>
<pre>aceast? cutie verde are 300 px</pre>
<div>L??imea minim? a acestui element div este setat? la 350 px,
deci nu poate fi mai īngust decāt atāt.</div>
<p>Introduce?i un text pentru a vedea cum func?ioneaz?.</p>
</body>
</html>
procentul de īn?l?ime ?i l??ime CSS nu func?ioneaz?
cum se face īn?l?imea la fel ca l??imea in CSS
care este l??ime ?i īn?l?ime CSS intr-o cutie div
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.