Dimensiuni ale elementelor
Dimensiunile elementelor se setează folosind proprietățile width (lățime) și height (înălțime).
Valoarea implicită pentru aceste proprietăți este auto, ceea ce înseamnă că browser-ul determină automat lățimea și înălțimea elementului. De asemenea, dimensiunile pot fi setate explicit folosind unități de măsură (pixeli, em) sau folosind procente:
width: 150px;
width: 75%;
height: 15em;Pixelii determină lățimea și înălțimea exacte. Unitatea de măsură em depinde de înălțimea fontului din element. Dacă dimensiunea fontului elementului, de exemplu, este de 16 pixeli, atunci 1 em pentru acest element va fi egal cu 16 pixeli. Astfel, dacă se stabilește lățimea elementului la 15em, aceasta va fi de fapt 15 * 16 = 230 pixeli.
Dacă elementului nu i se stabilește dimensiunea fontului, atunci aceasta va fi moștenită din parametri sau va fi valoarea implicită.
Valorile procentuale pentru proprietatea width se calculează pe baza lățimii elementului-container. Dacă, de exemplu, lățimea elementului body pe pagina web este de 1000 pixeli, iar un element <div> inclus în acesta are o lățime de 75%, atunci lățimea efectivă a acestui <div> va fi 1000 * 0.75 = 750 pixeli.
Dacă utilizatorul schimbă dimensiunea ferestrei browser-ului, lățimea elementului body și, în consecință, lățimea blocului div inclus se vor schimba, de asemenea.
Valorile procentuale pentru proprietatea height funcționează similar cu proprietatea width, doar că acum înălțimea se calculează în funcție de înălțimea elementului-container.
De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dimensiuni în CSS3</title>
<style>
div.outer{
width: 75%;
height: 200px;
margin: 10px;
border: 1px solid #ccc;
background-color: #eee;
}
div.inner{
width: 80%;
height: 80%;
margin: auto;
border: 1px solid red;
background-color: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html> 
În același timp, dimensiunile reale ale elementului pot diferi de cele stabilite în proprietățile width și height. De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dimensiuni în CSS3</title>
<style>
div.outer{
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
border: 5px solid #ccc;
background-color: #eee;
}
</style>
</head>
<body>
<div class="outer">
Determinarea dimensiunii reale în CSS 3
</div>
</body>
</html>
Așa cum se vede în captură, în realitate valoarea proprietății width - 200px - determină doar lățimea conținutului intern al elementului, iar pentru blocul propriu-zis al elementului va fi alocat spațiu a cărui lățime este egală cu lățimea conținutului intern (proprietatea width) + spațiile interioare (proprietatea padding) + lățimea graniței (proprietatea border-width) + spațiile exterioare (proprietatea margin).
Cu alte cuvinte, elementul va avea o lățime de 230 pixeli, iar lățimea blocului elementului, luând în considerare spațiile exterioare, va fi de 250 pixeli.
Astfel de calcule ar trebui luate în considerare la stabilirea dimensiunilor elementelor.
Cu ajutorul unui set suplimentar de proprietăți, pot fi stabilite dimensiunile minime și maxime:
- min-width: lățimea minimă
- max-width: lățimea maximă
- min-height: înălțimea minimă
- max-height: înălțimea maximă
min-width: 200px;
width:50%;
max-width: 300px;În acest caz, lățimea elementului este egală cu 50% din lățimea elementului-container, însă nu poate fi mai mică de 200 pixeli și mai mare de 300 pixeli.
Redefinirea lățimii blocului
Proprietatea box-sizing permite redefinirea dimensiunilor stabilite ale elementelor. Aceasta poate lua una dintre următoarele valori:
- content-box: valoarea implicită, la care browser-ul pentru determinarea lățimii și înălțimii reale ale elementelor adaugă valorile proprietăților width și height ale elementului
De exemplu:
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
border: 5px solid #ccc;
background-color: #eee;
box-sizing: content-box;În acest caz, elementul va avea o lățime de 200 pixeli și o înălțime de 100 pixeli.
- padding-box: indică browser-ului web că lățimea și înălțimea elementului trebuie să includă spațiile interioare ca parte a valorii sale. De exemplu, să presupunem că avem următorul stil:
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
border: 5px solid #ccc;
background-color: #eee;
box-sizing: padding-box;Aici, lățimea reală a conținutului intern al blocului va fi egală cu 200px (width) - 10px (padding-left) - 10px (padding-right) = 180px.
Este de remarcat faptul că majoritatea browser-elor moderne nu suportă această proprietate.
- border-box: indică browser-ului web că lățimea și înălțimea elementului trebuie să includă spațiile interioare și granițele ca parte a valorii sale. De exemplu, să presupunem că avem următorul stil:
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
border: 5px solid #ccc;
background-color: #eee;
box-sizing: border-box;Aici, lățimea reală a conținutului intern al blocului va fi egală cu 200px (width) - 10px (padding-left) - 10px (padding-right) - 5px (border-left-width) - 5px (border-right-width) = 170px.
De exemplu, să definim două blocuri care diferă doar prin valoarea proprietății box-sizing:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dimensiuni în CSS3</title>
<style>
div{
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
border: 5px solid #ccc;
background-color: #eee;
}
div.outer1{
box-sizing: content-box;
}
div.outer2{
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer1">
Determinarea dimensiunii reale în CSS 3
</div>
<div class="outer2">
Determinarea dimensiunii reale în CSS 3
</div>
</body>
</html> În primul caz, la determinarea dimensiunilor blocului, grosimea graniței, precum și spațiile interioare și exterioare, vor fi adăugate la proprietățile width și height, deci primul bloc va fi mai mare:
