AgerNic.com/ro
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
Tutorial

Īn?l?imea ?i l??imea in CSS


Next Page >>
HTML images

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.

Acest element verde are o l??ime de 300 px, o īn?l?ime de 150 px, margine ro?ie sub?ire, margine solid?, galben? de 10 px.

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.

Exemplu
<!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:

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>
Not?: dac? proprietatea l??ime minim? este specificat? cu o valoare mai mare decāt proprietatea l??ime maxim?, īn acest caz, se va aplica valoarea l??imii minime.

 

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:

Exemplu
<!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>
Not?: Proprietatea cu l??imea minim? este īn general utilizat? pentru a se asigura c? un element are cel pu?in o l??ime minim?, chiar dac? nu este prezent con?inut. Cu toate acestea, elementului i se va permite s? creasc? normal dac? con?inutul s?u dep??e?te l??imea minim? stabilit?.

 

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

Tags: procentul de īn?l?ime ?i l??ime css nu func?ioneaz?, stenogram?, propriet??i, auto, raport, cum se face īn?l?imea la fel ca l??imea

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


analytics piwika